【发布时间】：2026-02-05 05:50:01
【问题描述】：
这是一个 jfiddle 或示例：https://jsfiddle.net/mwL4L2a4/1/
.all {
margin: 0 auto;
width:60%;
}
.division {
float: left;
vertical-align:top;
}
.full {width : 100%; border:1px solid black;}
.half {width: 48%; border:1px solid black; }
.third {width : 30%; border:1px solid black;}
我有不同的 div 覆盖其父级的全部、一半或三分之一的长度。使用左浮动，所有 div 都倾向于覆盖父宽度，但我希望避免 div 行之间有间隙。我的 div 高度在变化，宽度由类指定。
添加 div 时没有常规模式。它可以是满的、一半的、三分之二的、三分之一的。在创建新的时，我通常会考虑前一个 div 宽度的大小，以便完全填充行 (3*1/3)、2*1/2、1/3+2/3.. 等)
我最终可以将某个类添加到 div 中，例如当它的高度高于前一个时；或者如果一个 div 放在前两个 div 之前，则添加一个新类，等等。我应该通过为每种可能的情况编写一个 jquery 来使其工作的路径吗？
这是问题的直观示例 http://i.imgur.com/5xLCxjo.jpg 和 http://imgur.com/a/c6udM
我在论坛上阅读了一些有关此问题的帖子，似乎 display: table, table-cell 似乎都不起作用，因为 div 宽度和高度可变排列。此外，砌体 js 不能应用，因为它对所有 div 都采用固定的宽度值。并且当使用 salvatore 时，您不能在 div 宽度之间交替，因为每列必须每行包含一个元素。
感谢您的帮助，希望不要多此一举。
【问题讨论】：
-
通常这是使用 javascript 库完成的，用于将零件组装在一起 - 要搜索的术语是“masonry”，而我过去不需要固定宽度的术语：我已经将它们与响应列一起使用 - 那里有很多可供选择。 CSS 浮动在最后一个“下方”，因此它们不会填补空白。另一种方法是设置每行的最小高度，可能使用 flexbox。