html - 如何限制内联显示的子 div 的数量？

Question

有没有办法使用 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;

有什么想法吗？

Answer 1

如果你知道元素的大小，你可以这样做:

.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;
}

http://jsfiddle.net/b4f5c/