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 的 inline companion，不需要创建 div 然后强制它们 display: inline。)