html - 对齐灵活容器中的 float DIV

Question

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

是否可以单独使用 CSS 和 HTML 来完成此操作？

Answer 1

您的#2 图片不是元素左浮动时发生的情况。您可以查看在 this fiddle 上将发生什么的示例.

如果您对 the reason 感兴趣:

A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there is a line box, the outer top of the floated box is aligned with the top of the current line box.

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

在 fiddle 中，您可以添加:

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

在 css 中，所有内容都将正确对齐。问题在于您是否想要具有自动调整行的流畅布局。您需要使用 JavaScript 来调整调整大小时元素的样式。