具有固定宽度中心列的流体三列布局

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

• body 获取 display: table - 这也可以应用于 div 包装器。

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

• body 的直接 div 子节点获取display: table-cell

• body 得到一个min-width 以确保左右列不会变得太小

• 中间列固定在您想要的宽度（本例中为 500 像素）

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

#1 - 工作示例

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
}

<div class="left">

</div>

<div class="middle">

</div>

<div class="right">

</div>

---

方法 #2 - 使用 display: inline-block 和 width: calc(x - y)

兼容性： Calc 与 IE 9 + and most modern browsers 兼容。也有可用的 javascript 后备。

• body 的直接 div 子级为 display: inline-block 和 vertical-align: top。它们会将自己与同一行的浏览器窗口顶部对齐

• 中间列的宽度固定

• 左右两列给出calc(50% - 250px)；这计算页面宽度的 50% 减去固定中间列宽度的一半。

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

#2 - 工作示例

注意关闭和打开 divs 标记之间是如何没有间隙的； this is to prevent an inline gap between elements.

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

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

---

方法 #3 - with display: flex

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

兼容性： IE11 and most modern browsers

• body 得到display: flex 和height: 100vh (100% of the viewport height)

• 直系子孙得到flex: 1，会长大和缩小

• 中间列得到它的固定宽度和flex: 0 0 auto；它不会增长或缩小

这里是a useful guide to Flexbox.

#3 - 工作示例

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
}

<div class="left">

</div>

<div class="middle">

</div>

<div class="right">

</div>