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

您无法在内联元素上设置明确的宽度/高度，因此如果它们必须是特定大小，那么您就会陷入浮动状态。浮动元素可能导致各种布局怪癖，因此如果你没有让浮动东西，那么内联肯定是首选。

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

Answer 2

一个不优于另一个;他们做不同的事情。当内联显示某些内容时，溢出当前行的内容将换行到下一行。另一方面，浮点数将div显示在矩形块中。因此，根据您的具体情况，您可能会发现两者都很有用。

在您给出的示例中，float可能会更好。

哪个更适合从左到右的布局：浮动或显示：内联？

2 个答案: