Html 如何阻止这些 div 重叠？

How do I stop these divs from overlapping?

提问by Josh

I have three divs, within a content div.

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

Container width 70%. Within that I have -Left, width 20%. -Content, width 60%. -Right, width 20%.

容器宽度 70%。其中我有 -Left，宽度为 20%。-内容，宽度 60%。- 对，宽度为 20%。

I would like container to take up 70% of the page's width, and the inner ones (left, content, and right) to take up 20%, 60% and 20% of the container div.

我希望容器占据页面宽度的 70%，而内部（左侧、内容和右侧）占据容器 div 的 20%、60% 和 20%。

I have tried other questions on here, I have tried Google, but can't seem to find the right answer. Please help me stop them from overlapping.

我在这里试过其他问题，我试过谷歌，但似乎无法找到正确的答案。请帮助我阻止它们重叠。

But when I re-size the browser, the divs overlap. Like this:

但是当我重新调整浏览器的大小时，div 会重叠。像这样：

Here's the relevant CSS code:

这是相关的 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;
}

采纳答案by Praveen Kumar Purushothaman

Just remove the min-widthfrom your CSS! And give min-widthto the container with margin: autoto make it center.

只需min-width从您的 CSS 中删除！并给min-width容器margin: auto以使其居中。

Try this CSS:

试试这个 CSS：

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

Check out fiddle here: http://jsfiddle.net/UaqU7/2/

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

回答by McGarnagle

Take out the min-width CSS.

取出最小宽度的 CSS。

Once the window width gets below a certain size, those elements have no choice but to overlap. Let's say your window is 1000px; then the container will be 700px. But with the min widths, the divs in the container are already at 1000px, overflowing the container.

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

回答by sandeep

Instead of giving min-widthof child DIV's you can give it to #container. Write like this:

而不是给最小宽度孩子的DIV是你可以给它#container。像这样写：

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

Check this http://jsfiddle.net/yLVsb/

检查这个http://jsfiddle.net/yLVsb/

回答by SVS

Here is the fiddle its working fine http://jsfiddle.net/r42hH/2/

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

回答by Undefined

You need to take out the min-widthfrom your CSS.

您需要min-width从 CSS 中取出。

When the page is sized smaller the min-widthstops it from shrinking any further. Thus causing the overlap.

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

回答by Chris James Champeau

Here you go, if you want a min width, set it on the container

在这里，如果您想要最小宽度，请将其设置在容器上

http://jsfiddle.net/VBSYu/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%;
}?