Question

我对div非常生气，我很快就会完成网站，但是一件简单的事情我不知道如何解决。

基本上我有一个菜单和内容div，内容因页面而异，我不希望它们相互包装。

我已经阅读了几十篇文章，说明了将最小宽度放到包装器上，但我不知道我的最小宽度是多少。有些页面宽度只有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>

Answer 1

这就是你要追求的吗？ http://jsbin.com/exuvoz

我将.menu和.content个元素包含在<div> float: left和changed div.content { float: left; } div.content { overflow: hidden; }中。

Answer 2

适用于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>

Answer 3

请试试这个：

<!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”使用百分比。希望这会有所帮助。

Answer 4

您是否尝试过display：table on wrapper and display：table-cell on menu and content？

如果没有固定尺寸，如何防止DIV包装？

4 个答案: