有没有办法使用 CSS3 来限制在一行(或内联)中显示的子 div 的数量?
<div class="parent">
<div class="child">
<img>
<p>Text explaining img</p>
</div>
<div class="child">
<img>
<p>Text explaining another img</p>
</div>
<!-- If I only want two per line, let's push the next two down -->
<div class="child">
<img>
<p>Text explaining another img</p>
</div>
<div class="child">
<img>
<p>Text explaining another img</p>
</div>
</div>
我考虑过只应用宽度和边距,但我还希望一行中的最后一个 child 有 margin-right:0;
有什么想法吗?
最佳答案
如果你知道元素的大小,你可以这样做:
.parent {
border: 2px solid #c00;
padding: 4px;
display: inline-block;
}
.child {
border: 2px solid #0c0;
padding: 4px;
display: block;
width: 64px;
height: 64px;
margin: 0 76px 0 0;
}
.child:nth-child(2n) {
margin: -76px 0 0 76px;
}
关于html - 如何限制内联显示的子 div 的数量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12613374/