流体三柱布局，固定宽度中心柱

Question

我想获得这种布局：

<------------ Browser Width 100% ------------>
[left][----- center: fixed width -----][right]       

• 中间列具有固定的像素宽度

• 左右列同样填充剩余的视口宽度

当视口宽度不够宽时，以下示例会中断，并且由于固定宽度的中心列，获得正确的百分比宽度很难。

div {
  display: inline-block;
  background: #F90;
  height: 100px;
  width: 20%;
}
.center {
  width: 500px;
  background: #FF0;
}

<div class="left">left (fill available space)</div>
<div class="center">fixed width</div>
<div class="right">right (fill available space)</div>

Answer 1

实现流体/固定列布局的三种方法

方法＃1 - with display: table

这是最简单的方法之一，并且具有良好的浏览器支持。

兼容性： IE8 + and all modern browsers

• 正文得到display: table - 这也可以应用于div包装器。

• table-layout: fixed确保中间列保持固定宽度

• 身体的直接孩子得到display: table-cell

• 正文获得min-width以确保左右列不会变得太小

• 中间栏固定在您想要的宽度（本例中为500px）

• 左右列继承剩余页面宽度

＃1 - 工作实例

＆＃13;

＆＃13;

html {
  height: 100%;
}
body {
  display: table;
  height: 100%;
  margin: 0;
  width: 100%;
  table-layout: fixed;
  min-width: 800px;
}
body > div {
  display: table-cell;
}
.left {
  background: #000;
}
.middle {
  background: #F00;
  width: 500px;
}
.right {
  background: #F90
}

＆＃13;

<div class="left">

</div>

<div class="middle">

</div>

<div class="right">

</div>

＆＃13;

＆＃13;

＆＃13;

---

方法＃2 - display: inline-block和width: calc(x - y)

兼容性：Calc IE 9 + and most modern browsers兼容。还有javascript回退。

• 身体的直接儿童被display: inline-block和vertical-align: top。他们将自己与同一行上的浏览器窗口顶部对齐

• 中间栏获得固定宽度

• 左右列均为calc(50% - 250px);这会计算页面宽度的50％减去固定中间列宽度的一半。

• box-sizing: border-box将填充和边框合并到宽度和高度

＃2 - 工作实例

注意关闭和打开div标签之间没有间隙; this is to prevent an inline gap between elements.

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
}
body {
  min-width: 800px;
}
body > div {
  display: inline-block;
  width: calc(50% - 250px);
  height: 100%;
  vertical-align: top;
}
.left {
  background: #000;
}
.middle {
  background: #F00;
  width: 500px;
}
.right {
  background: #F90
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

---

方法＃3 - with display: flex

这是一个非常棒的方法，但旧浏览器不支持：（

兼容性： IE11 and most modern browsers

• 正文获得display: flex和height: 100vh (100% of the viewport height)

• 直接孩子获得flex: 1并且会成长和缩小

• 中间列的固定宽度为flex: 0 0 auto; 不增长或缩小

这是a useful guide to Flexbox.

＃3 - 工作实例

＆＃13;

＆＃13;

body {
  display: flex;
  height: 100vh;
  margin: 0;
  min-width: 800px;
}
body > div {
  flex: 1;
}
.left {
  background: #000;
}
.middle {
  background: #F00;
  width: 500px;
  flex: 0 0 auto;
}
.right {
  background: #F90
}

＆＃13;

<div class="left">

</div>

<div class="middle">

</div>

<div class="right">

</div>

＆＃13;

＆＃13;

＆＃13;