html - n番目の画像を押し下げる

Question

4つの画像要素があり、要素nrの後にすべての要素をプッシュダウンしたいと思います。2

したがって、取得する代わりに：

| | | |

私は得るだろう：

| |
| |

img:nth-child(2)要素の配置に使用していますが、機能します。しかし、私は次の要素を押し下げるのに問題があります。私はこれを行うと思いclear: rightましたが、機能しません。

これが私のフィドルです：http： //jsfiddle.net/zXteb/

Answer 1

clear動作させるには、画像をフロートさせる必要があります。

div img {
    float: left;
    margin-right: 5px;
    margin-top: 5px;
}

div img:nth-child(2n+1) {
    clear: left;
}

http://jsfiddle.net/zXteb/1/

Answer 2

あなたはフロート＆クリアなしでそれを行うことができます。改行を含む非常にクールなトリックがありますcontent：

http://jsfiddle.net/rudiedirkx/By2sD/1/

ul {
    list-style: none;
    width: 500px;
    background: #eee;
    text-align: center;
    padding: 0;
    display: block;
}
li {
    display: inline;
    margin: 5px;
}
li:nth-child(2n+2):after {
    content: '\A';
    white-space: pre;
}

は\A改行文字であり、にwhite-space: preなります<br>。すべての要素がインラインであるため、全体を中央に配置できます

Answer 3

これがHTMLの使用方法です--

<div id="one">
    <img style="width: 100px; height: 100px" />
</div>
<div id="two">
    <img style="width: 100px; height: 100px" />
</div>    
<div id="three">     
    <img style="width: 100px; height: 100px" />
</div>            
<div id="four">
    <img style="width: 100px; height: 100px" />
</div>

そして、cssはこのようになります

#one {
    float:left;
    padding-right:5px;
}
#two {
    float:left;
}
#three {
    float:left;
    clear:both;
    padding-right:5px;
}
#four {
    float:left;
}