0

サムネイルに次のクラスを使用して、コンテンツ ラッパー内に 4x3 のサムネイルを表示しています。

.thumbnail
{
    float:left;
    width:300px;
    height:200px;
    margin-right:10px;
    margin-bottom:10px;
}

マークアップは次のとおりです。

<div class=wrapper>
    <div class=thumbnail></div>
    <div class=thumbnail></div>
    <div class=thumbnail></div>
    <div class=thumbnail></div>

    <div class=thumbnail></div>
    <div class=thumbnail></div>
    <div class=thumbnail></div>
    <div class=thumbnail></div>

    <div class=thumbnail></div>
    <div class=thumbnail></div>
    <div class=thumbnail></div>
    <div class=thumbnail></div>
</div>

問題は、 を持つ 4 番目のサムネイルごとに追加のクラスを割り当てる必要があることですmargin-right:0px。そうしないと、コンテンツ ラッパーに収まらず、次のように乱雑に見えます。

   __   __   __
| |__| |__| |__|     |
|  __   __   __      |
| |__| |__| |__|     |
|  __   __   __      |
| |__| |__| |__|     |

この余分なクラスを回避するより良い方法はありますか? ありがとう

編集: div.wrapper img:nth-child(4n) を使用できることがわかりましたが、これはクロスブラウザーでも機能しますか?

4

2 に答える 2

3

ラッピングを追加してもdivよろしいですか？

その場合は、古いブートストラップ 2.3.2 グリッド アプローチを使用できます。負のマージンを使用し、サムネイルmargin-leftの代わりに使用して、余分なラッパーを左にシフトします。margin-right

HTML:

<div class="wrapper">
    <div class="row">
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>

        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
        <div class="thumbnail"></div>
    </div>
</div>

CSS:

.row {
    margin-left: -10px;
}

.thumbnail {
    float:left;
    width:300px;
    height:20px;
    margin-left: 10px;
    margin-bottom:10px;
    background: #ccc;
}

デモ(幅が少し縮小されています)

于 2013-09-21T14:18:37.980 に答える
0 
.thumbnail:nth-child(4n+0)
{
  margin-right:0px;
}

このCSSを使用して、各行の4 divごとに追加のCSSを追加できます

于 2013-09-21T14:00:34.890 に答える