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

Posted 2023-03-06

【中文标题】如何使中间的div的宽度响应

【英文标题】：How to make the width of a div in the middle responsive

【发布时间】：2016-09-20 17:21:01

【问题描述】：

您好，我想知道如何在 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 响应，以便它填充容器。

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

【参考方案1】：

使用弹性盒

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

*box-sizing:border-box; -webkit-box-sizing:border-box;
html, bodyheight:100%; margin:0;


.container
  display:flex;


/* your styles */
.left  width:50px; background: #0bf;
.middleflex: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, bodyheight:100%; margin:0;


.container > *
  float: left;


/* your styles */
.left  width:50px;                background: #0bf;
.middlewidth: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, bodyheight:100%; margin:0;


.table
  display:table;
  width:100%;
  table-layout: fixed;

.cell
  display:table-cell;


/* your styles */
.left  width:50px; background: #0bf;
.middlewidth: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, bodyheight:100%; margin:0;

.containerbackground: #fb0; overflow:auto; height:100%;

/*your styles*/
.left  float:left;  width:50px; height:100%; background: #0bf;
.middleoverflow: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>

【参考方案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>

【参考方案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>

【讨论】：

跨浏览器怎么样？这是很少或非常兼容的？

@Roko C. Buljan Nope :)

@ErnieBob 自己看看：caniuse.com/#feat=flexbox 所以忘记 IE

没有flex就没有办法了吗？只是使用常规显示和浮动或宽度？

如果你愿意，你可以使用.middle width: calc(100% - 110px); ，但这不仅仅是一个IE版本更好（IE