0

行 (またはインライン) に表示される子 div の量を制限するために CSS3 を使用する方法はありますか?

<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>

幅とマージンを適用することだけを検討しましたが、行の最後の子にも margin-right:0; を持たせたいと思います。

何か案は？

4

2 に答える 2

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/

于 2012-09-27T07:51:18.357 に答える