Question

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

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。翻转它们，图像现在位于文本下方。那是为什么？

Answer 1

它与div.text是块级元素并且不与浮动的.image_container交互有关。

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

但是当.image_container在div.text之后，它占据了可用水平空间的100％（因为它是块级别）时，它会尊重它并向右浮动，就在它下面。< / p>

如果你在你的元素周围放置边框，那么应该清楚发生了什么。

Answer 2

重要的不是HTML，而是CSS。 CSS float仍然像块一样处理元素 - 浮动块元素。带有浮子的元件基本上将一只脚保持在地面上，其位置是挡块，但其余部分漂浮在空中。 CSS浮点数不像位置绝对值，它完全弹出它的块位置和使它浮动。

Answer 3

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

Answer 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

如果需要其他东西，请告诉我。

什么时候HTML元素的顺序很重要？

4 个答案: