如何使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

<子>（的 IE10 + ）
使用flex，您可以将display: flex;添加到.container，将flex:1;添加到.middle。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

使用calc()

<子>（的 IE9 + ）
使用calc使浏览器为您进行计算

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

使用display:table

_{（所有浏览器）}
您只需使用display table和cell：

即可

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

使用浮动

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用Flexbox在flex: 1 div

上设置.middle

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

我相信WITH SUM_DATA AS (select col1, col2, nvl(sum(col3),0), nvl(sum(col4))0, ..... nvl(sum(col50)) from table A group by col1, col2) SELECT xyz FROM abc, sum_data WHERE abc.join_col = sum_data.join_col 和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 */
}