左から右のレイアウトに適しているのはどちらですか：floatまたはdisplay：inline？

Question

divの中にいくつかのアイコンがあり、divで表示されるデフォルトの上から下のレイアウトではなく、左から右の構造でレイアウトする必要がありました。それはおそらく私が左から右のいずれか使用してレイアウトするdivを引き起こす可能性があるCSSを知っているが、私は（a little helpで）考え出したほとんどの人々にニュースではありません。

float: left/right 

または

display:inline. 

マイ質問は - が他のものよりも好ましいです？

<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

インライン要素に明示的な幅/高さを設定することはできません。したがって、特定のサイズでなければならない場合、それらを浮かべて固定します。浮動要素はさまざまなレイアウトの不具合を引き起こす可能性があるので、にはが浮動小数点を持っていないと、インラインが確実に優先されます。

ここでは、divの代わりに画像のサイズを設定する必要があります。次にdivsをスパンに変更して、内部の画像のサイズに自然に拡大することができます。 （spanはdivのインラインコンパイルにすぎずdivを作成してからdisplay: inlineに強制する必要はありません）

Answer 2

もう一方は好ましくありません。彼らは違うことをする。何かがインラインで表示されると、現在の行をオーバーフローさせる内容が次の行にラップします。一方、浮動小数点数は、divを長方形のブロックに表示したままにします。したがって、あなたの特定の状況に応じて、あなたは両方とも役に立つかもしれません。

あなたの与えられた例では、おそらくfloatがもっとうまくいくでしょう。