如何并排放置div

Question

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

原文由 markt 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

1. 使用 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>

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

原文由 Crozin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

CSS3 引入了也可以实现这种行为的 弹性框（又名弹性框）。

只需定义第一个 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>

演示：

 div {
    color: #fff;
    font-family: Tahoma, Verdana, Segoe, sans-serif;
    padding: 10px;
}
.container {
    background-color:#2E4272;
    display:flex;
}
.fixed {
    background-color:#4F628E;
    width: 200px;
}
.flex-item {
    background-color:#7887AB;
    flex-grow: 1;
}

 <div class="container">
    <div class="fixed">Fixed width</div>
    <div class="flex-item">Dynamically sized content</div>
</div>

请注意，弹性框不向后兼容旧浏览器，但它是针对现代浏览器的一个很好的选择（另请参阅 Caniuse 和 MDN ）。 CSS Tricks 上提供了关于如何使用弹性框的综合指南。

原文由 filoxo 发布，翻译遵循 CC BY-SA 4.0 许可协议