<div> 元素，我想要像下面这样并排放置它们：+------------+---------+
| navigation | content |
+------------+---------+
<div>的大小能够根据需要自适应，但不要超出所需范围（缩小适应行为）。然后内容<div>应填充剩余空间。代码：
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<style type="text/css">
#nav { float: left; }
#content { overflow: hidden; }
</style>
</head>
<body>
<div id="nav">
<ul>
<li>Navigation Item 1</li>
<li>Navigation Item 2</li>
<li>Navigation Item 3</li>
<li>Navigation Item Long One 4</li>
</ul>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vulputate scelerisque pharetra. Cras vitae dolor felis. In hac habitasse platea dictumst. Donec aliquam eros nec massa facilisis rhoncus. Praesent hendrerit metus id quam sodales mattis. Vestibulum odio velit, ornare tempus ultrices et, egestas congue sem. Sed nec felis ut quam volutpat vestibulum eget vel tellus. Aenean mattis, justo in ultrices dictum, enim felis sollicitudin dui, et ornare sem tellus quis ligula. Nam viverra imperdiet lacus et luctus. Curabitur id nunc a risus rhoncus tempor. Proin eu tortor est, vel tempus orci. Donec mattis neque id felis aliquam ac convallis turpis lobortis. Suspendisse potenti.</p>
<p>Vestibulum hendrerit tincidunt elit at congue. Fusce ut nisi sapien, eu adipiscing eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut eget diam nibh. Vestibulum tortor nisl, iaculis ultricies imperdiet et, porta nec eros. Proin convallis venenatis felis eget sodales. Integer tincidunt auctor tortor, in vestibulum nunc iaculis suscipit. Nam vitae mi id libero sollicitudin vestibulum. Vestibulum id dui eget nibh hendrerit tempus. Aliquam eu turpis at enim euismod sodales. Vestibulum suscipit purus felis. Donec non metus sem, ac sollicitudin urna. Aenean sed odio nunc, et tristique mi. Cras sodales bibendum sodales. Nunc in risus leo, sed scelerisque lacus. Praesent vel metus velit. Integer commodo nisl eu erat laoreet hendrerit.</p>
<p>Etiam vel sem ut magna commodo facilisis non ut magna. Praesent metus urna, sollicitudin vitae cursus a, imperdiet non libero. Vestibulum at cursus augue. Vivamus fringilla odio in mauris sagittis ultricies. Phasellus quis tincidunt tellus. Curabitur ac pellentesque odio. Morbi enim dui, sollicitudin eu imperdiet at, ultricies vel elit. Ut et tortor tellus, euismod molestie justo. Donec gravida fermentum blandit. Curabitur tincidunt est eget nibh mollis dignissim. Nunc sit amet arcu sapien. Nullam et nulla massa, id dapibus lorem. Nunc luctus sagittis tellus, nec suscipit lacus mollis eget. Nam placerat laoreet tempus. Curabitur lectus leo, ultrices a hendrerit a, pharetra quis neque. Nullam vel fringilla metus. Nunc nisi nunc, laoreet a tempor eget, condimentum ac ante. Duis bibendum orci at massa scelerisque in lobortis tortor fermentum. Cras in mi a dui tristique vulputate vitae ac arcu. Aliquam non odio non purus feugiat luctus.</p>
<p>Maecenas et accumsan odio. Duis lobortis urna sed neque pulvinar condimentum. Curabitur ac nibh ante, eget tincidunt massa. Quisque bibendum, nunc eget ultrices interdum, purus est sodales nulla, in vehicula nisi sem nec nunc. Etiam venenatis, felis vitae sodales condimentum, est erat placerat mi, ut tempus lectus augue id nulla. Duis justo mauris, condimentum ut sodales ac, semper et dolor. Quisque ac nisi velit, non viverra lectus. Sed auctor condimentum est, sit amet semper nibh aliquam sed. Curabitur nisl nisi, egestas quis tempus nec, euismod sit amet diam. Sed pretium lacinia tristique. Aenean congue bibendum velit. Pellentesque leo velit, hendrerit ut pellentesque at, scelerisque in augue. Donec id orci est. Suspendisse tempor, velit ut tempus vestibulum, mauris metus viverra velit, in ornare elit orci et lorem. Maecenas feugiat dictum ipsum at iaculis. Pellentesque auctor neque ut tellus viverra vulputate. Vestibulum eu tellus metus. Praesent accumsan molestie ipsum, tempor vehicula metus cursus ac. Integer aliquet pharetra sodales. Proin adipiscing, odio eget tristique placerat, sem nunc aliquet mauris, vel gravida ligula augue id nunc.</p>
<p>Sed placerat, dui ac accumsan porta, lacus massa molestie nibh, in lacinia enim nisl venenatis erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed sit amet nulla a lacus accumsan gravida sed a libero. Pellentesque tincidunt metus non libero porta lacinia. Ut non neque in tortor cursus tempor. Duis massa urna, hendrerit eget eleifend at, dapibus quis libero. Nunc accumsan felis ac purus suscipit pretium. Duis rhoncus ultrices tempus. In quis tellus mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam facilisis, enim non consequat faucibus, massa ipsum pellentesque ligula, vel rhoncus lacus lacus a justo. Nullam at ultricies metus. Mauris fermentum mollis ipsum at iaculis. Integer porttitor, nisl in interdum auctor, odio augue vehicula nunc, ac gravida lectus nibh id erat. Fusce interdum hendrerit quam ac aliquet. Fusce venenatis risus ac neque porta egestas dictum eleifend mi. Nunc scelerisque interdum molestie. Proin suscipit sem sed libero posuere malesuada.</p>
</div>
</body>
</html>
解释:
这很容易理解。你只需要两个 div 元素。导航栏使用了 float: left 属性，这使得其它内容可以围绕它进行浮动。而内容部分则使用了 overflow: hidden 来强制内容放在一个列中。IE6 不支持 overflow: hidden，但浮动效果仍然有效。
overflow:hidden应该不会导致它只显示一列啊，这行为有些奇怪。我不太确定这是为什么。 - mpen<div>添加float:left; CSS属性。display:inline;属性同时对两个进行定位。<style>
#page_wrap { width:996px; margin: 0 auto; }
#nav { float:left; }
</style>
<div id="page_wrap">
<div id="nav">
#nav
</div>
#contents
</div>
float: left，它们就不会比需要的大小更大了；或者你也可以额外指定一个宽度！请注意，两个div的宽度加在一起不能超过可用空间的大小，否则布局就会破坏，它们将叠在彼此下面！