9

我在一个内容 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;
}
4

6 回答 6

8

只需min-width从您的 CSS 中删除！并给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/

于 2012-06-12T06:34:13.070 回答
4

取出 min-width CSS。

一旦窗口宽度低于某个大小，这些元素就别无选择，只能重叠。假设你的窗口是 1000px；那么容器将是 700px。但是使用最小宽度，容器中的 div 已经是 1000px，溢出容器。

于 2012-06-12T06:29:56.597 回答
3

而不是给子 DIV 的最小宽度，你可以给它#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/

于 2012-06-12T06:35:00.903 回答
2

你需要min-width从你的 CSS 中取出。

当页面变小时，它会min-width阻止它进一步缩小。从而造成重叠。

于 2012-06-12T06:32:55.533 回答
2

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

于 2012-06-12T06:57:17.653 回答
1

给你，如果你想要一个最小宽度，把它设置在容器上

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%;
}​
于 2012-06-12T06:34:22.600 回答