Css 如何定位两个<；部门>；元素并排？_Css

Css 如何定位两个<；部门>；元素并排？

css

Css 如何定位两个<；部门>；元素并排？,css,Css,我想并排放置两个元素，如下所示： +------------+---------+ | navigation | content | +------------+---------+ 我希望导航尽可能大，但不要太大（收缩以适应行为）。然后，内容应填满剩余的空间如何在不指定百分比（如20%/80%）的情况下使用CSS实现此定位？如果将导航div和内容div设置为float:left它将不会根据需要变大；也可以另外指定宽度！请注意，两个div的宽度加在一起不得超过可用空间量，否则布局将中断，它们

我想并排放置两个

元素，如下所示：

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

我希望导航

尽可能大，但不要太大（收缩以适应行为）。然后，内容

应填满剩余的空间

如何在不指定百分比（如20%/80%）的情况下使用CSS实现此定位？

如果将导航div和内容div设置为float:left它将不会根据需要变大；也可以另外指定宽度！请注意，两个div的宽度加在一起不得超过可用空间量，否则布局将中断，它们将相互重叠

给导航

一个

浮动：左CSS属性
或者使用显示：inline将两者都作为目标属性。

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

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

      #contents
</div>

#换页{宽度：996px；边距：0自动；}
#导航{浮动：左；}
#导航
#内容
代码：
<!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>


测试
#导航{浮动：左；}
#内容{溢出：隐藏；}

导航项目1
导航项目2
导航项目3
导航项目长1 4

Lorem ipsum dolor sit amet，是一位杰出的献身者。空秃鹫权杖。多洛猫的生命。在hac habitasse Plateum，一句名言。不，不，不，不，不，不，不。我是马蒂斯之家。天鹅绒前庭、天鹅绒前庭、羊绒前庭。这只猫的前庭是一个巨大的前庭。埃尼安·马蒂斯（Aenean mattis）、尤斯托（ultrices dictum）、埃尼·费利斯·索利西图丁（enim felis sollicitudin dui）和奥纳·塞姆·特鲁斯·奎斯·利古拉（Orna sem tellus quis ligula）。纳姆·维韦拉·拉库斯和卢克图斯。这是一种暂时性的斜纹夜蛾。在欧盟侵权法中，这是一种临时的侵权行为。多内克·马蒂斯·内克是一只猫，它是一只猫。潜力悬钩子
康格酒店的前庭。这是我们的智慧，是我们的爱神。佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。但直径为零。内翻前庭，内翻前庭，内翻前庭。贝内那提猫咪苏打粉。整数tincidunt auctor tortor，位于前庭nunc iaculis suscipit。我的生命是自由的。前庭有两个时间。埃尼姆·尤伊斯莫·索达莱斯的Aliquam eu turpis。猫内脏前庭。Donec non metus sem，ac sollicitudin urna。埃尼安·塞德·奥迪奥·努克和特里斯蒂克·米。粗苏打粉比本杜姆苏打粉。里索斯·利奥的努克，塞德·斯克利斯·拉克斯。这是我的梦想。整型通用汽车公司
通用设备的所有级别均为非通用设备。这是一个不自由的人。奥古斯广场的前庭。毛里斯矢状体中的弗林吉亚·奥迪奥（Vivamus fringilla odio）。菲塞勒斯·奎斯·廷西蒙特·泰勒斯。库拉比图尔·佩伦茨克·奥迪奥。Morbi enim dui，sollicitudin eu Impremedit at，ultricies vel elit。但不管怎样，尤伊斯莫·莫莱斯蒂·胡斯托。多奈克孕妇发酵剂。库拉比图尔·蒂奇登（Curabitur tincidunt est eget nibh mollis Dignessim）。努克·阿梅特·阿尔库·萨皮恩。无主无主，无主无主，无主无主。牛膝。纳姆·拉奥里特·坦普斯。利奥牧师，亨德雷特牧师，内克牧师。弗林蒂利亚·梅特斯。Nunc nisi Nunc、laoreet a TEMPER eget、调味品ac ante。杜伊斯·比本杜姆·奥奇（Duis bibendum orci）在发酵玉米饼（lobortis tortor Fentum）的马萨权杖餐厅（massa scelerisque）。我在酒后喝了一杯，这是我的宿命。阿利夸姆不是奥迪奥，不是普卢斯，是卢克图斯的封建者
他是一个有经验的人。杜伊斯·洛博蒂斯·乌尔纳（Duis lobortis urna）是一种独特的普尔文纳调味品。库拉比图尔·阿尼布·安特（Curabitur ac nibh ante），马萨（eget tincidunt massa）。这是一个很好的例子，它是一个很好的例子。维尼那提斯，苏打水调味品的生命，我的生命，我的生命，我的生命。杜伊斯·朱斯托·莫里斯，苏打汽水调味品，塞姆珀和多洛。非维韦拉·莱克托斯。这是拍卖人的调味品，他坐在那里。从现在起，我们就要为自己的生活做好准备。紫斑前草。埃尼安·康格·比本杜姆·维利特。佩伦茨克的利奥·维利特，亨德雷特·乌特·佩伦茨克，奥古斯的权杖。不要放弃。暂时性悬吊，前庭暂时性悬吊，前庭暂时性悬吊，前庭暂时性悬吊，前庭暂时性悬吊，前庭暂时性悬吊，前庭暂时性悬吊，前庭暂时性悬吊，前庭暂时性悬吊。艾库利斯的封建格言。佩伦茨克拍卖人内克·维韦拉（neque ut tellus viverra）秃鹫。耳垂前庭。同侧累及的累及性胎动，同侧累及的临时交通工具。这是一个非常好的例子，它是一个非常好的例子
塞德·普莱斯特拉特，在威尼斯的拉契尼亚和尼姆·尼斯勒，在门前的酒后驾车。虎口浮雕和肘部浮雕同侧前庭；她坐在阿梅特·努拉（amet nulla）的座位上，一个怀孕的女人坐在一个自由人的座位上。非自由之门。但在临时侵权行为中，不属于任何一方。杜伊斯·马萨·乌纳，亨德雷特·埃吉特·埃利芬德，达皮布斯·奎斯·自由。这只猫是一只猫。杜伊斯·隆库斯·乌尔特里斯·坦帕斯（Duis rhoncus ultrices tempus）。在我的内心深处。Lorem ipsum dolor sit amet，是一位杰出的献身者。面部无表情，无表情，舌侧无表情，颧弓无表情。ultricies metus的Nullam。在iaculis的mollis ipsum Mauris酵母菌。整数端口，nisl在中间拍卖商，odio augue vehicula nunc，ac孕妇选择nibh id erat。Fusce inte