为什么我的图标在 DIV 布局中从上到下排列而不是从左到右排列？

我将这 3 个图标包含在单独的 DIV 中，所有这些图标都包含在一个 DIV 中：

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

任何建议，将不胜感激。

现在来说一些更全面的内容：

您看起来只想要一排图标。使用 HTML，您需要float包含图标的 div，以便它们彼此相邻。之所以需要浮动，是因为 div 是块级元素（与内联相反），这意味着它旁边的水平空间中不能存在任何内容。

您可以通过添加一个来实现此效果float: left;规则到div.divicon

浮动有两个作用：它将块元素从页面流中取出，允许其他元素存在于其旁边（或在其周围流动），并减少框的宽度以适应内容。就父级而言，浮动元素没有高度。为了说明这一点，只需尝试给出#icons背景颜色或边框。您会注意到它不会显示 - 或显示为 1px 线。

为了让父级识别浮动元素的高度，您需要告诉父级应使用以下规则隐藏溢出：

#icons { overflow:hidden; }

这在 IE 中也适用，但并非总是如此，因此有时您可能需要设置高度或宽度或执行zoom:1这往往会修复许多 IE 错误（如果您想了解更多信息，请查找“hasLayout bug”）。

现在换一个不同的解决方案：

您看起来只想要一排图标。除非有理由将图像包围在 div 中（在您的示例中没有），否则我建议您执行以下操作：

<div id="icons">
    <img src="/icons/text.png" id="icontxt" />
    <img src="/icons/pdf.png" id="icondoc" />
    <img src="/icons/rtf.png" id="iconrtf" />
</div>

#icons { /* rules for our container go here */ margin:0; padding:0; /* etc... */ }
#icons img { /* rules for your icons */ border:none; margin:0 2px; /* etc... */ }

我已经删除了图像上的冗余 div 和冗余类属性。由于图像是内联元素，因此您不需要使用浮动元素，并且不会有任何额外的 div 可能会导致divitis一种退化的 HTML 疾病，影响许多网站并通过不良建议传播。请记住，只使用您需要的东西 - 不要仅仅因为它在那里就使用它。

希望这可以帮助，

Darko