HTML 元素的顺序何时重要？答案

【问题标题】：When does order of HTML elements matter?HTML 元素的顺序何时重要？
【发布时间】：2010-09-04 11:26:25
【问题描述】：

我有一行文本，我想在其旁边放置一个小图形，在全屏液体布局中。我有它的工作，但我不知道为什么。

html:

<div class="wrapper">
  <div class="image_container">
    <img src="some_valid_url">
  </div>
  <div class="text">Zachary</div>
</div>

CSS（用 sass 编写，如果您对嵌套感到好奇）：

.wrapper {
    text-align: right;
    float: left;
    width: 10%;
    word-wrap: breakword;
}

.image_container {
    margin-left: 2px;
    float: right;

    img {
        height: 20px;
        width: 20px;
        vertical-align: top;
    }
}

.text {
    overflow: hidden;
}

这应该是把小图形和文本放在一行上，图形就在文本的右边。它有效，但前提是 image_container div 高于文本 div。翻转它们，图像现在位于文本下方。这是为什么呢？

【问题讨论】：

我不清楚你的描述，如果你能用图形解释，我想做自定义更新以使其工作。

标签： html css

【解决方案1】：

这与div.text 是块级元素而不与浮动的.image_container 交互有关。

当.image_container 在标记中位于div.text 之前时，它会向右浮动，然后因为div.text 没有被清除或浮动，它基本上会忽略.image_container 并继续在同一条垂直线上。

但是，当 .image_container 位于 div.text 之后，它占用了 100% 的可用水平空间（因为它是块级别），它尊重这一点并向右浮动，就在它的下方。

如果您在两个元素周围都设置了边框，那么发生的事情应该会变得很清楚。

【讨论】：

你能回答stackoverflow.com/questions/9943560/…吗？

【解决方案2】：

真正重要的不是 HTML，而是 CSS。 CSS float 仍然将元素视为块 - 浮动块元素。带有浮动的元素基本上将一只脚保持在其块位置所在的地面上，但其余的则漂浮在空中。 CSS 浮动不像绝对位置，它完全将其从块位置中弹出并且使其浮动。

【讨论】：

【解决方案3】：

我认为问题在于您在包装器中的文本对齐。 text-align 实际上也会对齐 div 中的元素，因此如果您的文本首先列出，则文本和图像将被推到右侧。你可以通过在你的文本类中添加“float:left”来解决这个问题。

【讨论】：

【解决方案4】：

我已经制定了一个自定义解决方案，即使您将图像容器放在文本下方或上方也可以使用

<div class="wrapper clearfix">
  <div class="image_container">
      <img src="http://www.netbsd.org/images/download-icon-orange.png" />
  </div>
  <div class="text">Zachary</div>
</div>

.image_container,.text{
   float:left;
    line-height:40px;
}

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

你可以看到它的working demo

如果需要其他信息，请告诉我。

【讨论】：