如何避免这些div重叠？

Question

我有三个div，它们在一个内容div中。

容器宽度为70%。 其中我有： -左边，宽度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;
}

- Josh

---

达到最小宽度后，它们无法进一步缩小，这会导致重叠。使用最小宽度的唯一方法是在达到一定数量后防止用户调整大小 :) - Taha Paksu

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/

- Praveen Kumar Purushothaman

Answer 2

去掉最小宽度的CSS。

一旦窗口宽度低于某个大小，这些元素就别无选择，只能重叠。比如说你的窗口是1000像素，那么容器就是700像素。但是使用最小宽度的话，容器中的div已经达到了1000像素，超出了容器的范围。

- McGarnagle

Answer 3

不要给子 DIV 设置 min-width，而是给 #container 设置。写成这样：

#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/

- sandeep

Answer 4

你需要从CSS中删除min-width。

当页面缩小到一定程度时，min-width会阻止其进一步缩小，从而导致重叠。

- Undefined

Answer 5

这里是 jsfiddle，它正常工作。 http://jsfiddle.net/r42hH/2/

- SVS

Answer 6

好的，如果你想要一个最小宽度，请在容器上设置。

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

- Chris James Champeau