2

div 内にいくつかのアイコンがあり、div に付属しているように見えるデフォルトの上から下のレイアウトではなく、左から右の構造でレイアウトする必要がありました。CSS を知っているほとんどの人にとってはニュースではないかもしれませんが、(少し助けて) 次のいずれかを使用して div を左から右にレイアウトできることがわかりました。

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;
  }
4

2 に答える 2

3

インライン要素に明示的な幅/高さを設定することはできないため、特定のサイズでなければならない場合は、それらをフローティングすることになります。フローティング要素はさまざまなレイアウトの癖を引き起こす可能性があるため、フロートする必要がない場合はインラインが確実に推奨されます。

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

于 2009-07-10T05:19:56.037 に答える
2

一方は他方よりも好ましくありません。彼らは違うことをします。何かがインラインで表示される場合、現在の行からはみ出すコンテンツは次の行に折り返されます。一方、フロートは、div を長方形のブロックに表示したままにします。したがって、特定の状況に応じて、両方が役立つ場合があります。

あなたの与えられた例では、フロートはおそらくはるかにうまく機能します。

于 2009-07-10T05:20:20.357 に答える