如何使中间的 div 的宽度响应

Question

您好，我想知道如何在 CSS 中实现一种方法，使 div 的宽度位于另外两个 div 的中间自动调整。

.container {
  width: 100%;
}
.left,
.right,
.middle {
  float: left; // or display:inline i don't know... you tell me
}
.left {
  width: 50px;
}
.right {
  width: 60px;
}
.middle {
  width: "...fill the container...";
}

<div class="container">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>

所以大家可以看到，容器是响应式的，左右两边的div是固定的。我需要让中间的 div 响应，以便它填满容器。

你可以把它想象成两个固定的侧边栏，中间是响应式的主要内容

Answer 1

您可以使用 Flexbox 只需在 .middle div

上设置 flex: 1

.container {
  display: flex;
}
.left {
  width: 50px;
  background: lightblue;
}
.right {
  width: 60px;
  background: lightblue;
}
.middle {
  flex: 1;
  background: lightgreen;
}

<div class="container">
  <div class="left">Left</div>
  <div class="middle">Middle</div>
  <div class="right">Right</div>
</div>

如果您不想使用 Flexbox，您可以使用 float 和 calc

.container {
  width: 100%;
}
.container > div {
  float: left;
}
.left {
  width: 50px;
  background: lightblue;
}

.right {
  width: 60px;
  background: lightblue;
}

.middle {
  width: calc(100% - (50px + 60px));
  background: lightgreen;
}

<div class="container">
  <div class="left">Div</div>
  <div class="middle">Div</div>
  <div class="right">Div</div>
</div>

Answer 2

我相信 display: table 和 display: table-cell 在这里工作得很好。

.container {
  display: table;
  width: 100%;
}
.left,
.right,
.middle {
  display: table-cell;
}
.left {
  background: red;
  width: 50px;
}
.right {
  background: blue;
  width: 60px;
}
.middle {
  background: green;
  /* no width needed */
}

<div class="container">
  <div class="left">left</div>
  <div class="middle">middle</div>
  <div class="right">right</div>
</div>

Answer 3

使用 Flexbox

_(IE10+)
使用 flex 您可以将 display: flex; 添加到 .container 并将 flex:1; 添加到 .middle.

*{box-sizing:border-box; -webkit-box-sizing:border-box;}
html, body{height:100%; margin:0;}


.container{
  display:flex;
}

/* your styles */
.left  {width:50px; background: #0bf;}
.middle{flex:1;     background: #fb0;}
.right {width:60px; background: #bf0;}

<div class="container">
  <div class="left">50</div>
  <div class="middle">remaining width</div>
  <div class="right">60</div>
</div>

---

使用calc()

_(IE9+)
使用 calc 让浏览器为您进行计算

*{box-sizing:border-box; -webkit-box-sizing:border-box;}
html, body{height:100%; margin:0;}


.container > *{
  float: left;
}

/* your styles */
.left  {width:50px;                background: #0bf;}
.middle{width:calc(100% - 110px);  background: #fb0;}
.right {width:60px;                background: #bf0;}

<div class="container">
  <div class="left">50</div>
  <div class="middle">remaining width</div>
  <div class="right">60</div>
</div>

---

使用display:table

_{（所有浏览器）}
您可以简单地使用 display table 和 cell:

*{box-sizing:border-box; -webkit-box-sizing:border-box;}
html, body{height:100%; margin:0;}


.table{
  display:table;
  width:100%;
  table-layout: fixed;
}
.cell{
  display:table-cell;
}

/* your styles */
.left  {width:50px; background: #0bf;}
.middle{width:auto; background: #fb0;}
.right {width:60px; background: #bf0;}

<div class="table container">
  <div class="cell left">50</div>
  <div class="cell middle">remaining width</div>
  <div class="cell right">60</div>
</div>

---

使用浮点数

_{（所有浏览器）}
或者您可以简单地使用 .container 背景颜色作为 .middle "background" 颜色....

*{box-sizing:border-box; -webkit-box-sizing:border-box;}
html, body{height:100%; margin:0;}

.container{background: #fb0; overflow:auto; height:100%;}

/*your styles*/
.left  {float:left;  width:50px; height:100%; background: #0bf;}
.middle{overflow:auto;}
.right {float:right; width:60px; height:100%; background: #bf0; }

<div class="container">
  <div class="left">50</div>
  <div class="right">60</div>
  <div class="middle">remaining width<br>(not actually, the background is .container's)</div>
</div>