0

幅780pxのコンテナがあり、1行に4つのサムネイルを収めたいと思います（複数の行があります）。

行の最初と4番目のサムネイルがコンテナの「壁」にくっつくように、サムネイル間のスペースを標準化するにはどうすればよいですか？

私のコード：

<ul class="thumbnails">
    <li class="card package">Image</li>
    <li class="card package">Image</li>
    <li class="card package">Image</li>
    <li class="card package">Image</li>
    <li class="card package">Image</li>
    <li class="card package">Image</li>
    <li class="card package">Image</li>
    <li class="card package">Image</li>
   ...and so on
</ul>
4

3 に答える 3

1

css3 を使用して、4 番目の要素ごとにマージンをカットします

li.card { 
  margin: 0 10px 10px 0;
}
li.card:nth-child(4n) {
  margin-right:0px;
}

このjsfiddleを参照してください

于 2013-01-17T08:39:50.360 に答える
1

たとえば、間に 20px のスペースが必要な場合は、次のようにします。

780-60=720ブロックに使用できるスペース

720/4=180あなたのブロック幅

.thumbnails .card{
width:180px;
margin-left:20px;
}
.thumbnails .card:first-child{
margin-left:0px;
}

質問を編集したので、各行に複数の ul を付けることをお勧めします。

あなたがそれを持っていると主張する場合：

http://reference.sitepoint.com/css/pseudoclass-nthchildこれは役立つかもしれません:

.thumbnails .card:first-child, .thumbnails .card:nth-child(n5) {

于 2013-01-17T08:31:54.640 に答える
0

このコードはあなたを助けるかもしれません。サムネイルの幅に関連するコンテナの幅を定義します

    #container {
    width:200px;
    }
    #container ul li{
    display:inline-block;
    }

これをチェックしてくださいhttp://jsfiddle.net/ychX4/

このアクションは、n 番目の子の Css セレクターで使用できます。ただし、Internet Explorer ブラウザはサポートしていません。参考：http ://css-tricks.com/how-nth-child-works/

幸運を..）

于 2013-01-17T09:04:28.387 に答える