Question

我目前正在与浮动元素再次战斗。

请看一下这个jsfiddle：float-issue

html {
  width: 100%
}
.container {
  /*width: 80%;*/
  /*margin: auto;*/
  border: 1px solid black;
}
.element {
  margin-left: 10px;
  margin-right: 10px;
  background-color: purple;
  float: left;
}

<div class="container" style="float: right">
  <div style="float: left">HEADER</div>
  <div style="border: 1px solid green;">
    <div style="float: left">
      <div class="element">lorem ipsum dolor sit amet.</div>
      <div class="element">lorem ipsum dolor sit amet. lorem ipsum dolor sit amet.</div>
      <div class="element">lorem ipsum dolor sit amet.</div>
    </div>
  </div>
</div>

我不明白的是，为什么紫色元素不在“HEADER”旁边而是在新行上？在已经浮动的div周围添加绿色边框div元素时出现了这个问题。我无法解释为什么这会产生新的行？ any any可以帮助我吗？

我认为会发生的事情是：

绿色边框div没有浮动，所以它填充容器div（因为没有内容（里面的元素浮动，因此不是流量的一部分）收缩到零高度。）
标题div漂浮在“绿色边界div”上方。
由于紫色元素左侧浮动有另一个div，因此该div将浮动在浮动标题旁边。

我错过了什么？

Answer 1

以下是display: inline-block

的解决方案

＆＃13;

html {
  width: 100%
}
.container {
  /*width: 80%;*/
  /*margin: auto;*/
  border: 1px solid black;
}
.element {
  margin-left: 10px;
  margin-right: 10px;
  background-color: purple;
  float: left;
}

＆＃13;

<div class="container" style="float: right">
  <div style="float: left; display: inline-block;">HEADER</div>
  <div style="border: 1px solid green; display: inline-block;">
    <div style="float: left">
      <div class="element">lorem ipsum dolor sit amet.</div>
      <div class="element">lorem ipsum dolor sit amet. lorem ipsum dolor sit amet.</div>
      <div class="element">lorem ipsum dolor sit amet.</div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

您正在将容器内的“HEADER”div和“green”div浮动。绿色div的内容总是太宽而不适合标题的右侧。如果您从绿色div和float: left div之间的div 中删除.element，您将看到您所追求的结果。

<div class="container" style="float: right"> <div style="float: left">HEADER</div> <div style="border: 1px solid green;"> <div> <div class="element">lorem ipsum dolor sit amet. </div> <div class="element">lorem ipsum dolor sit amet. lorem ipsum dolor sit amet.</div> <div class="element">lorem ipsum dolor sit amet. </div> </div> </div> </div>

Answer 3

关于浮子的位置。首先浮动标题，然后立即浮动包含＆＃34; .element＆＃34;的div。 class divs。但是DON＆＃39; T浮动.element div。在这里摆弄：https://jsfiddle.net/e9bqoucg/2/

 <div class="container" style="float: right">

    <div style="border: 1px solid green;">
        <div style="float: left;">HEADER</div>
        <div style="float: left">

            <div class="element">lorem ipsum dolor sit amet.  </div>
            <div class="element">lorem ipsum dolor sit amet.  lorem ipsum dolor sit amet.</div>
            <div class="element">lorem ipsum dolor sit amet.  </div>
        </div>
    </div>
</div>

右浮动容器导致换行

3 个答案: