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

Question

我将这 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;
  }

如有任何建议，我们将不胜感激。

Answer 1

现在更全面一些:

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

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

float 有两件事:它将 block 元素从页面流中移出，允许其他元素存在于它旁边(或围绕它流动)，它减小框的宽度以适应内容。就父元素而言， float 元素没有高度。为了说明这一点，只需尝试为 #icons 提供背景颜色或边框。您会注意到它不会显示 - 或显示为 1px 线。

为了让父级识别 float 元素的高度，您需要告诉父级应使用此规则 overflow hidden :

#icons { overflow:hidden; }

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

现在换一个解决方案:

您看起来只想要一排图标。除非有理由将图像包围在 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 和多余的类属性。由于图像是内联元素，因此您不需要随意使用 float 元素，也不会有任何可能导致 divitis 的额外 div，这是一种影响许多网站并通过不良建议传播的退行性 HTML 疾病。请记住，只使用您需要的东西 - 不要仅仅因为它在那里就使用它。

希望对您有所帮助，

达科