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