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 更改为 span，它会自然地扩展到内部图像的大小。（跨度只是 div 的内联伴侣，无需创建 div 然后强制它们display: inline。）

于 2009-07-10T05:19:56.037 回答
2

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

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

于 2009-07-10T05:20:20.357 回答