将浮动的DIV对准柔性容器

Question

我在灵活容器（部分＃1）中有一组左浮动DIV，当容器调整大小时，它不能包含单行中的所有DIV而不是默认行为（2）I希望行完全对齐，在需要的地方保持空间（类似表格的行为），如第3部分所示。

是否可以单独使用CSS和HTML来实现这一目标？

Answer 1

您的＃2图片不当元素左浮动时会发生什么。您可以在this fiddle上看到将发生的示例。

如果您对the reason感兴趣：

  

浮动框向左或向右移动，直到其外边缘接触包含块边缘或另一个浮动边缘的外边缘。如果有行框，则浮动框的外部顶部与当前行框的顶部对齐。

如果您事先知道容器的宽度，您可以将每个:nth-child()设置为clear:left以显示在一行中。

在小提琴中，您可以添加：

div:nth-child(3n)
{
  clear: left;
}

在css中，一切都将正确对齐。如果您想要一个具有自动调整行的流畅布局，则会出现问题。您需要使用JavaScript在调整大小时调整元素的样式。

Answer 2

首先要想到的是将每个方框包装在一个统一大小的div中，该div用于浮动，并且具有透明背景。

Answer 3

为了实现这一目标，您必须知道最大div的高度。如果这是动态的，你无法控制或预测高度，那么我认为这不会起作用。

基本上，将每个div包装在另一个div中，并将min-height属性设置为您希望看到的最大div的属性。

这应该产生＃3。

同时查看IE 7的最小高度黑客 - Min-Height Fast Hack