如何阻止这些div重叠？

Question

我在内容div中有三个div。

容器宽度70％。 在我的内心   - 左，宽20％。   - 内容，宽度60％。   - 右，宽度20％。

我希望容器占据页面宽度的70％，而内部容器（左，内容和右）占据容器div的20％，60％和20％。< / p>

我在这里尝试了其他问题，我尝试过谷歌，但似乎找不到合适的答案。请帮我阻止他们重叠。

但是当我重新调整浏览器大小时，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即可！并使用min-width将margin: auto提供给容器，使其成为中心。

试试这个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的 min-width 。写得像这样：

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

的小提琴