Question

我有两个<div>元素，我想并排排列如下：

+------------+---------+
| navigation | content |
+------------+---------+

我希望导航<div>尽可能大，但不要大（缩小到适合行为）。然后，内容<div>应填充剩余空间。

如何在不指定百分比率（例如20％/ 80％？

）的情况下使用CSS实现此定位

Answer 1

守则：

<!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，但浮动仍然有效。

Check it out at jsFiddle

Answer 2

为导航<div>添加float:left; CSS属性。

或者使用display:inline;属性进行定位。

Answer 3

如果您制作导航div和内容div float: left，则根据需要不会更大;或者您还可以另外指定宽度！请注意，两个div的宽度不得大于可用空间的大小，否则布局会断开，它们会在彼此之下！

Answer 4

<style>
     #page_wrap { width:996px; margin: 0 auto; }
     #nav { float:left; }
</style>

<div id="page_wrap">
    <div id="nav">
         #nav
     </div>

      #contents
</div>

如何并排放置两个<div>元素？</div>

4 个答案: