Question

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

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

<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

非常感谢任何帮助！

Answer 1

我在你的例子中看到你正在使用bootstrap框架，所以你可以使用bootstrap网格

<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>

Answer 2

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

.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: flex

wrapper

将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 个答案: