如何使用css將center1直接放置在center3下方

Question

我無法在＃center1正下方放置＃center3。我已經嘗試了漂移，它沒有工作，我也嘗試使用相對定位，但它也不工作。

我一直在互聯網上尋找這個主題的幫助，現在沒有任何運氣。我也花了一些時間來看看我能否自己搞清楚，但對我來說太困難了。

HTML

<section>  
    <article></article>  
    <aside></aside>  
    <aside id="center1"></aside>  
    <aside id="center2"></aside>  
    <aside id="center3"></aside>  
</section> 

CSS

section { 
    margin:0px auto; 
    width:960px; 
} 

article { 
    width:960px;t turned out to be 
    height:100px; 
    border:1px solid #333; 
} 

aside { 
    width:250px; 
    height:1000px; 
    border:1px solid #333; 
    margin-top:5px; 
    margin-right:5px; 
    float:left; 
} 

#center1 { 
    width:200px; 
    height:300px; 
    border:1px solid #333; 
    margin-top:5px; 
    float:left; 
} 

#center2 { 
    width:200px; 
    height:300px; 
    border:1px solid #333; 
    margin-top:5px; 
    float:left; 
} 

#center3 { 
    width:200px; 
    height:300px; 
    border:1px solid #333; 
    margin-top:5px; 
    float:left; 
}  

Answer 1

嘗試添加clear:left;到#center3

Answer 2

http://jsfiddle.net/paZB6/1/ （編輯新的小提琴：我加入.right-列1px藍色邊框所以喲你可以很容易地直觀地看到它在做什麼）

你需要首先添加一個clear到#center3以便繞過它上面的浮標。

此外，爲了防止它也清除您的旁邊，您需要將右側元素包含在包含元素中，以便將這些框與旁邊分開。

我所做的是創建兩列，放在一邊，再加上任何剩下的東西，然後你的＃center1,2,3框被包含在右邊的框內。請注意，您可以根據需要在右列添加寬度和其他任何內容，我只提供基本功能。

請注意，我還更改了包裝所有內容的HTML <section>。我沒有將它定位在css中作爲部分（不是你正在做的最佳實踐），而是給它一個名爲wrapper的類，並通過類名將它應用於它。

HTML：

<section class="wrapper"> 


<article> 
    <p>Some text</p> 
</article> 

<aside> 
</aside> 
<section class="right-container"> 
<aside id="center1"> 
</aside> 

<aside id="center2"> 
</aside> 

<aside id="center3"> 
</aside> 
</section><!-- END RIGHT CONTAINER --> 

</section> 

CSS：

.wrapper { 
    margin:0px auto; 
    width:960px; 
} 

article { 
    width:960px;t turned out to be 
    height:100px; 
    border:1px solid #333; 
} 

aside { 
    width:250px; 
    height:1000px; 
    border:1px solid #333; 
    margin-top:5px; 
    margin-right:5px; 
    float:left; 
} 

.right-container { 
    float: left; 
} 

#center1 { 
    width:200px; 
    height:300px; 
    border:1px solid #333; 
    margin-top:5px; 
    float:left; 
} 

#center2 { 
    width:200px; 
    height:300px; 
    border:1px solid #333; 
    margin-top:5px; 
    float:left; 
} 

#center3 { 
    width:200px; 
    height:300px; 
    border:1px solid #333; 
    margin-top:5px; 
    float:left; 
    clear: both; 
}