不同高度的Div元素如何在顶部对齐并排放置

Question

5

我希望将 div 平行排列，但是高度不相等，这导致第一行中高度较低的 div 与第二行中的 div 之间存在空白间隔。

我想要的效果如下图所示：

而不是这样的：

- Giest

使用position:absolute;和float:left;。 - user2638922

2

你有任何代码吗？ - Chris Brown

我会创建一个 Fiddle。 - user2638922

3

您可以为1和4、2和5、3和6制作包裹。 - benteh

3个回答

0

仅使用CSS无法实现此操作，除非您愿意绝对定位每个div，但这并不好玩。

其他选项包括

- ralph.m

1

使用“包装器”div和CSS，可以在不使用绝对定位或涉及JavaScript的情况下完成此操作。 - user314321

是的，这就是为什么对于简单静态布局来说这是最好的选择。不幸的是，在元素动态生成的CMS中或者在需要元素重新流动的响应式网站中，它并不是很有用。 - ralph.m

-2

对于 div 4 和 div 6，使用 margin-top: -20px;...

-20 只是示例。

- Max Leps

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user314321 · Accepted Answer

我会使用3个div（我们称之为A，B和C）作为列

这些会有style="float:left;width:32%;"，*注意宽度可以小于32％，并且可以以px设置。

A将包含1和4，而B将包含2和5。最后，C将包含3和6。

绝对不需要插件，可以仅使用CSS（目前由我完成）。