如何并排放置div
我有一个主包装div被设置为100％宽度。 在里面，我想有两个div，一个固定宽度，另一个填充剩下的空间。 我如何浮动第二个div来填补余下的空间。 感谢您的帮助。
有很多方法可以做你所要求的：
-
使用CSS
float属性 ：<div style="width: 100%; overflow: hidden;"> <div style="width: 600px; float: left;"> Left </div> <div style="margin-left: 620px;"> Right </div> </div> -
使用CSS
display属性 – 可以使div的行为像一个table：<div style="width: 100%; display: table;"> <div style="display: table-row"> <div style="width: 600px; display: table-cell;"> Left </div> <div style="display: table-cell;"> Right </div> </div> </div>
有更多的方法，但这两个是最stream行的。
CSS3引入了可以实现这种行为的灵活框 （又名.Flex框）。
只需定义第一个div的宽度，然后给第二个flex-grow值1 ，这将允许它填充父级的剩余宽度。
.container{ display: flex; } .fixed{ width: 200px; } .flex-item{ flex-grow: 1; }
<div class="container"> <div class="fixed"></div> <div class="flex-item"></div> </div>
jsFiddle演示
请注意，popup框不能与旧浏览器向后兼容，但对于定位现代浏览器来说，这是一个很好的select（另请参阅Caniuse和MDN ）。 关于如何使用弹性框的一个很好的综合指南可以在CSS技巧中find 。
在这个例子中，我已经包含了一个背景颜色来帮助显示事物的位置，以及浮动区域下面的内容。
不要把你的风格放在现实生活中，将它们抽取到样式表中。
<div style="width: 200px; float: left; background-color: Aqua;"> Left </div> <div style="margin-left: 220px; background-color: Silver;"> Right </div> <div style="clear: both;">Below</div>
的jsfiddle
我不太了解HTML和CSS的devise策略，但是如果你正在寻找一些简单的东西，并且能够自动适应屏幕（就像我一样），我相信最直接的解决scheme是让div的行为一个段落。 尝试指定display: inline-block
<div style="display: inline-block"> Content in column A </div> <div style="display: inline-block"> Content in column B </div>
您可能需要也可能不需要指定DIV的宽度
给第一个div一个左边的浮动和固定，第二个div 100％左边的浮动。 这应该够了吧。 如果你想放置在它下面的项目，你需要一个清晰的：既要放在下面的项目
如果你不指定IE6，那么漂浮第二个<div>并给它一个等于（或者可能稍大于）第一个<div>的固定宽度的边距。
HTML：
<div id="main-wrapper"> <div id="fixed-width"> lorem ipsum </div> <div id="rest-of-space"> dolor sit amet </div> </div>
CSS：
#main-wrapper { 100%; background:red; } #fixed-width { width:100px; float:left } #rest-of-space { margin-left:101px; /* May have to increase depending on borders and margin of the fixd width div*/ background:blue; }
保证金说明了“剩余空间” <div>可能包含比“固定宽度” <div>更多的内容的可能性。
不要把固定的宽度作为背景; 如果您需要将这些视为不同的“列”，则可以使用“ 虚拟列”技巧。
<div class="container" style="width: 100%;"> <div class="sidebar" style="width: 200px; float: left;"> Sidebar </div> <div class="content" style="margin-left: 202px;"> content </div> </div>
这将是跨浏览器兼容。 没有保证金的情况下，如果你的内容比你的侧边栏长，你将遇到内容一直在左边运行的问题。
