如何并排放置div

Question

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

Answer 1

有很多方法可以满足您的需求：

1. 使用CSS float属性：

   <div style="width: 100%; overflow: hidden;">
       <div style="width: 600px; float: left;"> Left </div>
       <div style="margin-left: 620px;"> Right </div></div>

2. 使用CSS display属性 - 可以用来使divs表现得像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>

有更多的方法，但这两个是最受欢迎的。

Answer 2

CSS3引入了灵活的盒子（又名flex盒子），它也可以实现这种行为。

只需定义第一个div的宽度，然后给第二个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演示

请注意，弹性框不能与旧浏览器向后兼容，但对于定位现代浏览器来说是一个很好的选择（另请参见Caniuse和MDN）。CSS Tricks提供了有关如何使用弹性框的完整指南。

Answer 3

我对HTML和CSS设计策略知之甚少，但是如果你正在寻找一些简单且适合屏幕的东西（就像我一样），我相信最直接的解决方案就是让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的宽度