我在文档中有一堆 div，每个 div 的宽度为 32%，但它们的高度各不相同。
CSS:
body{
text-align: center;
}
div{
vertical-align: top;
display:inline-block;
border-style:solid;
width:32%;
}
.a{
background-color: lightcoral;
height:200px;
}
.b{
background-color: lightseagreen;
height:500px;
}
HTML:
<body>
<div class="a"></div>
<div class="a"></div>
<div class="b"></div>
<div class="a"></div>
<div class="b"></div>
<div class="a"></div>
<div class="b"></div>
<div class="a"></div>
<div class="a"></div>
</body>
问题是当新行开始时，该行的每个div都定位在相同的y值，我需要它们是连续的，上下div之间没有空格。 有办法实现吗？
最佳答案
https://jsfiddle.net/yq4xubph/1/
可能不完全是你的想法，但你明白了
<body>
<div class='row'>
<div class="a"></div>
<div class="a"></div>
<div class="b"></div>
<div class="a"></div>
<div class="b"></div>
</div>
<div class ='row'>
<div class="a"></div>
<div class="b"></div>
<div class="a"></div>
<div class="a"></div>
</div>
</body>
body{
text-align: center;
display:inline-block;
width:100%;
}
.a,.b{
vertical-align: top;
display:block;
border-style:solid;
}
.row{
width:32%;
vertical-align: top;
display:inline-block;
}
.a{
background-color: lightcoral;
height:200px;
}
.b{
background-color: lightseagreen;
height:500px;
}
关于html - 当连续有多个div时，如何避免让下一行排在最高div的底部？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29461631/