如何混合流体和固定宽度？答案

【问题标题】：How to mix fluid and fixed widths?如何混合流体和固定宽度？
【发布时间】：2017-05-22 06:30:20
【问题描述】：

我有 2 个并排的盒子。我希望左框的宽度是固定的，而右框是流动的，填充剩余的浏览器宽度。

以下是我最好的尝试（这是错误的）：

<body style="font-size:0">
  <div style="100%;border:3px solid black">
    <div style="display:inline-block;background-color:red;width:50px;height:50px"></div>
    <div style="display:inline-block;background-color:green;width:100%;height:50px"></div>
  </div>
</body>

这是一个链接：https://plnkr.co/edit/5Mx41Her7bOr1dy99f7R?p=preview

任何帮助将不胜感激！

【问题讨论】：

标签： html css layout flexbox

【解决方案1】：

您可以使用 表格布局 - 请参阅下面的演示：

.wrapper {
  border: 3px solid black;
  display: table;
  width: 100%;
  height: 50px;
}
.wrapper div:first-child {
  background-color: red;
  display: table-cell;
  width: 50px;
}
.wrapper div:last-child {
  background-color: green;
  display: table-cell;
}

<div class="wrapper">
  <div></div>
  <div></div>
</div>

或者更好的是，您可以使用flexbox：

设置display: flexwrapper
将flex: 1添加到流体项

.wrapper {
  border: 3px solid black;
  display: flex;
  width: 100%;
  height: 50px;
}
.wrapper div:first-child {
  background-color: red;
  width: 50px;
}
.wrapper div:last-child {
  background-color: green;
  flex: 1;
}

<div class="wrapper">
  <div></div>
  <div></div>
</div>

【讨论】：

【解决方案2】：

我在您的示例中看到您正在使用引导框架，因此您可以使用引导网格

<div class="row">
  <div class="col-md-4">First box</div>
  <div class="col-md-8">Second box</div>
</div>

另外，通过 CSS，你可以像这样使用 Flexbox：

.container-box {
  display: flex;
  border: 3px solid black;
}
.container-box .left-box {
  width: 50px;
  height: 50px;
  background-color: red;
}
.container-box .right-box {
  width: 100%;
  height: 50px;
  background-color: green;
}

<div class="container-box">
  <div class="left-box"></div>
  <div class="right-box"></div>
</div>

【讨论】：