css - 从左到右布局哪个更好 : float or display:inline?

Question

我在 div 中有一些图标，需要使用从左到右的结构来布局它们，而不是似乎与 div 一起提供的默认从上到下布局。对于大多数了解 CSS 的人来说，这可能不是什么新闻，但我发现(使用 a little help )我可以使用以下任一方法使 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;
  }

Answer 1

您无法在内联元素上设置显式宽度/高度，因此如果它们必须具有特定大小，那么您将不得不 float 它们。 float 元素可能会导致各种布局怪异，因此如果您没有 float 元素，那么内联绝对是首选。

在这里，您应该能够设置图像而不是 div 的大小。然后你可以将 div 更改为 span，它会自然地扩展到内部图像的大小。 (span 只是 div 的内联伴侣，无需创建 div，然后强制它们 display: inline。)