如何阻止這些div重疊？

Question

我在內容div中有三個div。

集裝箱寬度70％。 在那里我有-Left，寬度20％。 - 內容，寬度60％。 - 右，寬度20％。

我希望容器占據頁面寬度的70％，內部容器（左，內容和右）占據容器div的20％，60％和20％。

我在這里嘗試了其他問題，我試過谷歌，但似乎無法找到正確的答案。 請幫我阻止他們重疊。

但是當我重新調整瀏覽器大小時，div會重疊。 像這樣：

這是相關的CSS代碼：

#container{
    width: 70%;
}
#left {
    float: left;
    width: 20%;
    min-width: 200px;
}
#content {
    float: left;
    width: 60%;
    min-width: 600px;
}
#right {
    float: right;
    width: 20%;
    min-width: 200px;
}

Answer 1

只需從CSS中刪除min-width ！ 並使用margin: auto給容器的min-width ，使其成為中心。

試試這個CSS：

#container{
    width: 70%;
    min-width: 1000px;
    margin: auto;
}
#left {
    float: left;
    width: 20%;
}
#content {
    float: left;
    width: 60%;
}
#right {
    float: right;
    width: 20%;
}

在這里查看小提琴： http ： //jsfiddle.net/UaqU7/2/

Answer 2

拿出最小寬度的CSS。

一旦窗口寬度低於特定大小，這些元素別無選擇，只能重疊。 假設你的窗口是1000px; 然后容器將是700px。 但是使用最小寬度，容器中的div已經是1000px，溢出容器。

Answer 3

你可以把它給#container而不是給孩子DIV的最小寬度 。 像這樣寫：

#container{
    width: 70%;
    min-width:1000px;
}
#left {
    float: left;
    width: 20%;
}
#content {
    float: left;
    width: 60%;
}
#right {
    float: right;
    width: 20%;
}

檢查這個http://jsfiddle.net/yLVsb/

Answer 4

你需要從CSS中取出min-width 。

當頁面尺寸較小時， min-width使其不再縮小。 從而導致重疊。

Answer 5

在這里，如果您想要最小寬度，請將其設置在容器上

http://jsfiddle.net/VBSYu/1/

#container{
    width: 70%;
    min-width: 1000px;
}
#left {
     float: left;
     width: 20%;
}
#content {
    float: left;
    width: 60%;
}
#right {
    float: right;
    width: 20%;
}​

Answer 6

這是其工作正常的小提琴http://jsfiddle.net/r42hH/2/