<分区>
我有这样的 div:
<div class="parent">
<div class="inner">text</div>
<div class="inner">text</div>
<div class="inner">text</div>
<div class="inner">text</div>
<div class="inner">text</div>
<div class="inner">text</div>
<div class="inner">text</div>
</div>
我想在 3 列设计中对齐 div，如下所示:
所以div的高度取决于里面的内容。
我尝试添加 display:inline-block 方法和 verticle-align:top; 但我所有的结果都是这样的:
将它们像第一张 图片一样正确地堆叠在一起的解决方案是什么？类似于 pinterest 如何堆叠图钉盒......
jsFiddle用于测试。
最佳答案
<div class="parent">
<div class="inner">text</div>
<div class="inner">text</div>
<div class="inner">text</div>
<div class="inner">text</div>
<div class="inner">text</div>
<div class="inner">text</div>
<div class="inner">text</div>
</div>
.inner {
background:lightblue;
padding:5px;
margin:5px;
display: inline-block;
width: 29%;
}
宽度取决于你自己的样式结构。
关于html - 将 div 堆叠在一起并相应地对齐下面的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44679541/