css - 如何阻止这些 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;
}

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

在这里查看 fiddle :http://jsfiddle.net/UaqU7/2/