如何并排放置div

Question

如何并排放置div

我有一个主要的包装div设置为100％宽度。在里面，我想有两个div，一个是固定宽度，另一个填充剩余的空间。如何浮动第二个div以填充剩余的空间。谢谢你的帮助。

Answer 1

有很多方法可以满足您的需求：使用CSS&nbsp;float属性：<div&nbsp;style="width:&nbsp;100%;&nbsp;overflow:&nbsp;hidden;"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;style="width:&nbsp;600px;&nbsp;float:&nbsp;left;">&nbsp;Left&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;style="margin-left:&nbsp;620px;">&nbsp;Right&nbsp;</div></div>使用CSS&nbsp;display属性&nbsp;- 可以用来使divs表现得像table：<div&nbsp;style="width:&nbsp;100%;&nbsp;display:&nbsp;table;"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;style="display:&nbsp;table-row"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;style="width:&nbsp;600px;&nbsp;display:&nbsp;table-cell;">&nbsp;Left&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;style="display:&nbsp;table-cell;">&nbsp;Right&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;</div></div>有更多的方法，但这两个是最受欢迎的。

Answer 2

CSS3引入了灵活的盒子（又名flex盒子），它也可以实现这种行为。只需定义第一个div的宽度，然后给第二个div设置一个flex-grow值，1使其能够填充父级的剩余宽度。.container{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;flex;}.fixed{ &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;200px;}.flex-item{ &nbsp;&nbsp;&nbsp;&nbsp;flex-grow:&nbsp;1;}<div&nbsp;class="container"> &nbsp;&nbsp;<div&nbsp;class="fixed"></div> &nbsp;&nbsp;<div&nbsp;class="flex-item"></div></div>jsFiddle演示请注意，弹性框不能与旧浏览器向后兼容，但对于定位现代浏览器来说是一个很好的选择（另请参见Caniuse和MDN）。CSS Tricks提供了有关如何使用弹性框的完整指南。

Answer 3

我对HTML和CSS设计策略知之甚少，但是如果你正在寻找一些简单且适合屏幕的东西（就像我一样），我相信最直接的解决方案就是让div表现为单词一个段落。尝试指定display: inline-block<div&nbsp;style="display:&nbsp;inline-block"> &nbsp;&nbsp;&nbsp;Content&nbsp;in&nbsp;column&nbsp;A</div><div&nbsp;style="display:&nbsp;inline-block"> &nbsp;&nbsp;&nbsp;Content&nbsp;in&nbsp;column&nbsp;B</div>您可能需要也可能不需要指定DIV的宽度