Question

有一个css浮动问题，我不知道如何修复或最好的修复方法，似乎无法在搜索中找到任何东西。我有一个可变数量的项目显示在div内，使用css浮动左侧所有内部框（图片中的1,2和3）但浮动打破了可变的文本行。开发人员大纲显示，因为方框1比方框2大，方框3不会像方框1一样向左冲，因为方框1会拧紧流动。如何保持盒子1和盒子2的垂直高度，但是让盒子3向左浮动它应该在哪里？做一个浮动：对;做同样的事情，但只是向左推3是div 2大于div 1

这只是一个例子，可能存在可变数量的行和列，因此仅执行第N个div css规则将不起作用。（包含div是基于包括响应式设计在内的一些条件的可变宽度）

几乎就像我必须在一行中每个项目的底部有一个变量缓冲区，以匹配最高的一个的高度。我也不想使用最小高度作为行，其中div是相同的高度将导致额外的空白区域，在那里不应该。如果列数可变，我将如何获得最高的元素？

一种可能的解决方案是使用空清除div技巧，但是当列变量时，如何获取行中的div数？我试图强迫第n个孩子::在示例中的东西之后但它没有用

.item:nth-child(2)::after {
    clear: both;
}

搜索没有显示任何有效的内容，如果有人发帖，请告诉我。

如果可能的话，由于一群用户使用不使用CSS3的旧浏览器，

也必须坚持使用CSS2

Answer 1

一种解决方案是使用display:inline-block代替数字而不是float:left。

.figure {
  display: inline-block;
  vertical-align: top;
  margin: 2px 1em;
  border:1px solid grey;
}

.figcaption {
  margin:1em;
}

<div class="section">
  <div class="figure">
    <img src="http://placehold.it/250x250" alt="#">
    <div class="figcaption">
      Line 1<br/>Line 2
    </div>
  </div>
  <div class="figure">
    <img src="http://placehold.it/250x250" alt="#">
    <div class="figcaption">
      Line 1
    </div>
  </div>
  <div class="figure">
    <img src="http://placehold.it/250x250" alt="#">
    <div class="figcaption">
      Line 1<br/>Line 2
    </div>
  </div>
</div>

Answer 2

你需要清除：在这种情况下实际上都是第3个元素。见下面的解决方案

<img src="http://via.placeholder.com/350x160">
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150">

max'

如果您有一些复杂的例子，请提供jsfiddle。

Answer 3

这是因为你的<div>的样式是＆＃34; float＆＃34;并且第3个div已经浮动到第1个，因为1st比其他人高。

可能的解决方案（不包括硬编码 - 它就像一个致命的罪恶）：

为集合中的每个项目赋予相同的高度

＆＃13;

.float {
  background-color: #f90;
  float: left;
  height: 100px;
  line-height: 100px;
  margin: 10px;
  text-align: center;
  width: calc(50% - 20px);
}

＆＃13;

<div class="float">float 1</div>
<div class="float">float 2</div>
<div class="float">float 3</div>

＆＃13;

使用不同的方法，例如flexbox

＆＃13;

.wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flex {
  background-color: #f90;
  height: 100px;
  line-height: 100px;
  margin: 10px;
  text-align: center;
  width: calc(50% - 20px);
}

＆＃13;

<div class="wrapper">
  <div class="flex" style="height: 120px;">flex 1</div>
  <div class="flex">flex 2</div>
  <div class="flex">flex 3</div>
</div>

＆＃13;

DIV以非线性方式浮动

3 个答案: