html - DIV 以非线性方式 float

Question

有一个 css float 问题，我不确定如何修复或修复的最佳方法，似乎无法在搜索中找到任何内容。我有一个可变数量的元素显示在一个 div 中，使用 css float 留在所有内部框(图片中的 1、2 和 3)上，但是 float 中断了可变的文本行。开发人员概述显示，由于盒子 1 比盒子 2 大，盒子 3 不会像盒子 1 那样向左浮动，这会搞砸流程。我如何保持框 1 和框 2 的垂直高度，但让框 3 float 到它应该在的位置？漂浮:对；做同样的事情但只是将 3 推到左边是 div 2 大于 div 1

这只是一个例子，可能有可变数量的行和列，所以仅仅执行第 N 个 div css 规则是行不通的。 (包含的 div 是基于包括响应式设计在内的一些条件的可变宽度)

几乎就像我必须在一行中的每个元素的底部都有一个可变缓冲区，以匹配最高元素的高度。我也不想使用最小高度，因为在 div 高度相同的行上会导致在不应该有的地方出现额外的空白。如果列数可变，我如何获得一行中最高的元素？

一个可能的解决方案是使用空的清除 div 技巧，但是当列是可变的时，我如何再次获得一行中的 div 的数量？我试图在示例中强制第 n 个 child::after 但它没有用

.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>