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

按下第n张图像

3 个答案: