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

使用 flex 盒

_(IE10+)
使用 flex 你可以添加 display: flex; 到 .container 和 flex:1; 到 .中间.

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

---

使用 float

_{(所有浏览器)}
或者您可以简单地使用 .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>