按下第n張圖像

Question

我有4個圖像元素，並且我想要在元素nr之後按下所有元素。 2

因此，而不是越來越：

| | | | 

我會得到：

| | 
| | 

我使用img:nth-child(2)的元素位置，以及它的工作。但我有問題推倒下面的元素。我認爲clear: right會這樣做，但它不起作用。

這裏是我的小提琴： http://jsfiddle.net/zXteb/

Answer 1

你可以不用浮動&清楚。有一個換行符一個非常酷的把戲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 2

你有浮動圖像，使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 3

這是怎麼回事去 在HTML use--

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