0

以下に示すようなパターンに従う Web サイトのコンテンツに対してブロックされたグリッドを作成しようとしています。JavaScript ではなく、CSS で完全に構成されていることが不可欠です。

パターン：

| | - - - - | => 1 x 100%
| - -|- - | => 2 x 50%
| - -|- - | => 2 x 50%
| - - - - | => 1 x 100%
| - -|- - | => 2 x 50%
| - -|- - | => 2 x 50%
| - - - - | => 1 x 100%
| - -|- - | => 2 x 50%
| - -|- - | => 2 x 50%
| - - - - | => 1 x 100%

:nth-child(5n+1)大きな全幅ブロックのスタイルをうまく設定できるようになりましたが、残りの部分については、下の次の要素が表示されるまで と の間で交互に行われ:oddます。:even(5n+1)

説明されているようにこれをマークアップする方法について誰か提案がありますか? 私は非常に感謝されます。

4

4 に答える 4

5

このクイックフィドルを見てください：

http://jsfiddle.net/duncan/Z3Vgt/

nth-child(3n+1)私があなたを正しく理解していれば、うまくいくようです。

于 2013-05-20T10:40:13.000 に答える
3

とにかく、すでに持っているものはほとんど機能します。nth-type(5n+1)すべての仕切りに同じマークアップを与えることで、仕切りのデフォルト スタイルを簡単に上書きできます。例えば：

<div class='content'>1</div>
<div class='content'>2</div>
<div class='content'>3</div>
<div class='content'>4</div>
<div class='content'>5</div>
<div class='content'>6</div>
...

.content {
    width:50%;
    font-weight:bold;
    ...
}
.content:nth-child(5n+1){
    width:100%;            /* Overrides 50% */
    font-weight:normal;    /* Overrides bold */
    ...
}

JSFiddle デモ。

于 2013-05-20T10:46:00.203 に答える
1

次のツールを試すことができます: CSS-Tricks の nth Tester

http://css-tricks.com/examples/nth-child-tester/

于 2013-05-20T10:44:29.010 に答える
1

Twitter経由で回答が提供されたようですが、助けてくれてありがとう： http://jsfiddle.net/AK5WL/1/

CSS

div {
    width: 19px;
    border-right: 1px solid #fff;
    height: 10px;
    margin-bottom: 1px;
    background: red;
    float: left;
}

div:nth-of-type(5n+1) {
    clear: both;
    width: 40px;
    background: green;
}

すべてに感謝します！

于 2013-05-20T10:49:12.030 に答える