我对div很生气，我很快就会完成网站，但是一件简单的事情我不知道如何解决。
基本上我有一个菜单和内容divs，内容不同页面到页面，我不希望它们相互包装。
我已经阅读了几十篇文章，说明了将最小宽度放到包装器上，但我不知道我的最小宽度是多少。有些页面宽度只有600px，有些页面几乎是1000px，它必须用作PHP模板。
这是代码，如果有人可以提供帮助，我会很高兴，因为我对此完全感到沮丧......
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
div {
padding: 2px
}
div.menu {
background-color: #FAFAA0;
float: left;
}
div.content {
background-color: #9DFBA9;
float: left;
}
</style>
</head>
<body>
<div class="menu">
menu<br>menu<br>menu<br>menu
</div>
<div class="content">
The pages which have different size here. For example:
<div style="width:600px">Page one</div>
or
<div style="width:900px">Page two?</div>
</div>
<div style="clear:both">
In either way I dont wan't this two divs wrapping, but I don't know the exact size of the content page.<br> So I can't just put a min width like 1024px.<br> When they are about to wrap, the scrollbar should appear only then...<br> How can I achieve
that?
</div>
</body>
</html>这就是你要追求的吗？ http://jsbin.com/exuvoz
我用.menu和.content <div>将float: left和changed元素包含在div.content { float: left; }和div.content { overflow: hidden; }中。
它适用于Chrome，IE9和Firefox
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
div {padding:2px}
div.wrapper { display: table; }
div.menu{
background-color:#FAFAA0;
display: table-cell;
}
div.content{
background-color:#9DFBA9;
display: table-cell;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="menu">
menu<br>menu<br>menu<br>menu
</div>
<div class="content">
The pages which have different size here. For example:
<div style="width:600px">Page one</div>
or
<div style="width:900px">Page two?</div>
</div>
</div>
<div style="clear:both">
In either way I dont wan't this two divs wrapping, but I don't know the exact size of the content page.<br>
So I can't just put a min width like 1024px.<br>
When they are about to wrap, the scrollbar should appear only then...<br>
How can I achieve that?
</div>
</body>
</html>
请试试这个：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
div {padding:2px}
div.menu{
background-color:#FAFAA0;
float:left;
}
div.content{
background-color:#9DFBA9;
float:left;
}
</style>
</head>
<body>
<div style="min-width:600px;border:1px solid;">
<div class="menu" style="width:10%">
menu<br>menu<br>menu<br>menu
</div>
<div class="content" style="width:80%">
The pages which have different size here. For example:
<div style="">Page one</div>
or
<div style="">Page two?</div>
</div>
<div style="clear:both">
In either way I dont wan't this two divs wrapping, but I don't know the exact size of the content page.<br>
So I can't just put a min width like 1024px.<br>
When they are about to wrap, the scrollbar should appear only then...<br>
How can I achieve that?
</div>
</div>
</body>
</html>
所以实际发生的事情是我把你的菜单div和内容div放到一个div中。请仔细查看我放置的内联样式。而不是使用“px”使用百分比。希望这可以帮助。
您是否尝试过显示：包装上的表格和显示：菜单和内容上的表格单元格？