如何使中间的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

使用弹性盒

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

_{（所有浏览器）}
你可以简单地使用displaytable和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“背景”颜色....

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

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，只需在.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>