此问题已在此处有答案：
CSS-only masonry layout（5个答案）
2天前关闭。
我在SO上看到过几个类似的问题，但我没能让它们起作用。这里有一个简单的例子：
代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.container {
display: flex;
flex-wrap: wrap;
}
.section {
box-sizing: border-box;
width: 100%;
padding: 20px;
}
.section-1 {
background-color: #f1c40f;
height: 100px;
}
.section-2 {
background-color: #2ecc71;
height: 200px;
}
.section-3 {
background-color: #3498db;
height: 300px;
}
@media (min-width: 768px) {
.section {
width: 50%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="section section-1">
Section 1 - Height: 100px
</div>
<div class="section section-2">
Section 2 - Height: 200px
</div>
<div class="section section-3">
Section 3 - Height: 300px
</div>
</div>
</body>
</html>看第一部分下面有一个空的地方。但我希望第3节立即在它下面，这样他们就像拼图一样很好地配合。
我错过了什么？
谢谢大家！
1条答案
按热度按时间mwg9r5ms1#
要实现的布局类型称为“砌体布局”。Here您可以阅读有关使用
flexbox实现它的方法。