定位div下面的幾個浮動左div div123s

描述css問題有點棘手，但我會盡我所能。定位div下面的幾個浮動左div div123s

在我的導航欄下方，我有一個容器div。它設定爲80％寬。

在容器div中，我有一個box-wrapper div，它包含四個div，它們都是float:left;它們是這樣的，以便它們可以一次下拉一個，具體取決於用戶的瀏覽器大小。

在包裝盒下面是另一個box-wrapper2 div，它包含四個未浮動的div。

它們一個在另一個之上。

問題是，由於某種原因，box-wrapper2 div正在向上移動並位於包裝盒後面。我希望它位於頂層包裝下面。

我該怎麼做？

下面是我在談論的頁面： http://www.rattletree.com/index2.php

如果使用螢火蟲和懸停在第一個「programDetail」分區，你可以看到它正在上升，並在上述DIV下。

感謝您的幫助！

來源

2011-03-24 Joel

請參閱此鏈接更多的選擇來解決問題：http://www.quirksmode.org/css/clearing.html

選項1. 我相信你可以設置你的div容器來overflow:hidden;這將清除它們上下顛簸第二容器，所以沒有重疊。

選項2. 您應該在浮標下面設置一個div來清除它們。有幾種方法可以做到這一點，但最簡單的就是在下面設置您的花車另一個DIV與CSS clear:both

邊注：一定要也給你清除用div一個height:0;line-height:0;display:block;，以確保它不會添加任何時髦在您的容器的底部空間

編輯： 由於這個問題是問最後一個（回答）達到預期效果的新方法已經改變。通常的做法是將有以下樣式的容器DIV：

.container:before, 
.container:after { 
display: table; 
line-height: 0; 
content: ""; 
} 
.container:after { 
clear: both; 
}

此方法使用流行的框架（如 - Zurb基金會& Twitter的引導）

來源

2011-03-24 03:15:12 ckaufman

明確的伎倆。我仍然不完全明白在這種情況下真正做到了什麼。這對於結果來說似乎是一個糟糕的名字。 :-) – Joel 2011-03-24 03:24:24

這是一個完全可以接受的解決方案，但選項2爲html文檔添加了不必要的標記。 – Kyle 2011-03-24 03:32:12

@凱爾，我絕對同意。選項2絕對是最糟糕的選擇。 – ckaufman 2011-03-24 03:37:15

如果我理解這個問題，我相信你應該應用這些風格...

.boxWrapper { 
    border: 1px solid red; 
    float: left; 
    height: 100%; 
    width: 100%; 
} 

.programDetailWrapper { 
    border: 1px solid red; 
    float: left; 
    height: 100%; 
}

來源

2011-03-24 03:17:45 Kyle

不幸的是，這是行不通的。它打破了容器分區的divs。 – Joel 2011-03-24 03:38:37

定位div下面的幾個浮動左div div123s

回答

相關問題