Was ist besser für das Layout von links nach rechts: float oder display: inline?

Question

Ich habe einige Symbole innerhalb von divs und musste sie mit einer Struktur von links nach rechts statt mit dem Standardlayout von oben nach unten, das mit Divs zu kommen scheint, erstellen. Es ist wahrscheinlich nicht Nachrichten zu den meisten Menschen, die CSS-weiß, aber ich herausgefunden (mit a little help), dass ich die divs dazu führen könnten, um das Layout von links nach rechts entweder:

float: left/right 

oder

display:inline. 

Meine Frage ist - ist eine über die andere vorzuziehen?

<div id="icons"> 

    <div id="divtxt" class="divicon"> 
    <img src="/icons/text.png" id="icontxt" class="icon"/> 
    </div> 

    <div id="divpdf" class="divicon"> 
    <img src="/icons/pdf.png" id="icondoc" class="icon"/> 
    </div> 

    <div id="divrtf" class="divicon"> 
    <img src="/icons/rtf.png" id="iconrtf" class="icon"/> 
    </div> 
</div> 

    div#icons 
    { 
    width:200px; 
    height: 100px; 
    } 

    div.divicon 
    { 
    margin: 0 0 0 0; 
    padding: 0 0 0 0; 
    border: 0 0 0 0; 
    } 

Answer 1

Sie können keine explizite Breite/Höhe auf Inline-Elementen festgelegt, so dass, wenn sie eine bestimmte Größe sein muss, dann sind Sie mit schwimmend sie stecken. Floating-Elemente können verschiedene Layout-Macken verursachen, daher wird Inline definitiv bevorzugt, wenn Sie keine haben, um Dinge zu schweben.

Hier sollten Sie in der Lage sein, die Größe der Bilder anstelle der divs festzulegen. Dann könnten Sie die divs in Spannen ändern, die sich natürlich auf die Größe der Bilder im Inneren ausdehnen würden. (Ein Bereich ist nur der Inline-Begleiter zu Div, keine Notwendigkeit, divs zu erstellen und dann erzwingen Sie display: inline.)

Answer 2

Man ist nicht vorzuziehen gegenüber dem anderen; sie machen verschiedene Dinge. Wenn etwas inline angezeigt wird, wird Inhalt, der die aktuelle Zeile überläuft, in die nächste Zeile umbrochen. Bei einem Float hingegen wird das div in einem rechteckigen Block angezeigt. Abhängig von Ihrer spezifischen Situation können Sie beide nützlich finden.

In Ihrem gegebenen Beispiel würde float wahrscheinlich viel besser funktionieren.