布局解决方案

了解 CSS 中属性的值及其特性， 透彻分析问题和需求才可以选择和设计最适合的布局解决方案。

居中布局

水平居中

布局解决方案 - 图1

子元素于父元素水平居中且其（子元素与父元素）宽度均可变。

inline-block + text-align

  1. <div class="parent">
  2.   <div class="child">Demo</div>
  3. </div>
  5. <style>
  6.   .child {
  7.     display: inline-block;
  8.   }
  9.   .parent {
  10.     text-align: center;
  11.   }
  12. </style>

优点

  • 兼容性佳（甚至可以兼容 IE 6 和 IE 7）

table + margin

  1. <div class="parent">
  2.   <div class="child">Demo</div>
  3. </div>
  5. <style>
  6.   .child {
  7.     display: table;
  8.     margin: 0 auto;
  9.   }
  10. </style>

NOTE: display: table 在表现上类似 block 元素，但是宽度为内容宽。

优点

  • 无需设置父元素样式 （支持 IE 8 及其以上版本）

NOTE：兼容 IE 8 一下版本需要调整为 <table> 的结果

absolute + transform

  1. <div class="parent">
  2.   <div class="child">Demo</div>
  3. </div>
  5. <style>
  6.   .parent {
  7.     position: relative;
  8.   }
  9.   .child {
  10.     position: absolute;
  11.     left: 50%;
  12.     transform: translateX(-50%);
  13.   }
  14. </style>

优点

  • 绝对定位脱离文档流，不会对后续元素的布局造成影响。

缺点

  • transform 为 CSS3 属性，有兼容性问题

flex + justify-content

  1. <div class="parent">
  2.   <div class="child">Demo</div>
  3. </div>
  5. <style>
  6.   .parent {
  7.     display: flex;
  8.     justify-content: center;
  9.   }
  11.   /* 或者下面的方法，可以达到一样的效果 */
  13.   .parent {
  14.     display: flex;
  15.   }
  16.   .child {
  17.     margin: 0 auto;
  18.   }
  19. </style>

优点

  • 只需设置父节点属性，无需设置子元素

缺点

  • 有兼容性问题

垂直居中

布局解决方案 - 图2

子元素于父元素垂直居中且其（子元素与父元素）高度均可变。

table-cell + vertical-align

  1. <div class="parent">
  2.   <div class="child">Demo</div>
  3. </div>
  5. <style>
  6.   .parent {
  7.     display: table-cell;
  8.     vertical-align: middle;
  9.   }
  10. </style>

优点

  • 兼容性好（支持 IE 8，以下版本需要调整页面结构至 table）

absolute + transform

  1. <div class="parent">
  2.   <div class="child">Demo</div>
  3. </div>
  5. <style>
  6.   .parent {
  7.     position: relative;
  8.   }
  9.   .child {
  10.     position: absolute;
  11.     top: 50%;
  12.     transform: translateY(-50%);
  13.   }
  14. </style>

优点

  • 绝对定位脱离文档流，不会对后续元素的布局造成影响。但如果绝对定位元素是唯一的元素则父元素也会失去高度。

缺点

  • transform 为 CSS3 属性，有兼容性问题

flex + align-items

  1. <div class="parent">
  2.   <div class="child">Demo</div>
  3. </div>
  5. <style>
  6.   .parent {
  7.     display: flex;
  8.     align-items: center;
  9.   }
  10. </style>

优点

  • 只需设置父节点属性，无需设置子元素

缺点

  • 有兼容性问题

水平与垂直居中

布局解决方案 - 图3

子元素于父元素垂直及水平居中且其（子元素与父元素）高度宽度均可变。

inline-block + text-align + table-cell + vertical-align

  1. <div class="parent">
  2.   <div class="child">Demo</div>
  3. </div>
  5. <style>
  6.   .parent {
  7.     text-align: center;
  8.     display: table-cell;
  9.     vertical-align: middle;
  10.   }
  11.   .child {
  12.     display: inline-block;
  13.   }
  14. </style>

优点

  • 兼容性好

absolute + transform

  1. <div class="parent">
  2.   <div class="child">Demo</div>
  3. </div>
  5. <style>
  6.   .parent {
  7.     position: relative;
  8.   }
  9.   .child {
  10.     position: absolute;
  11.     left: 50%;
  12.     top: 50%;
  13.     transform: translate(-50%, -50%);
  14.   }
  15. </style>

优点

  • 绝对定位脱离文档流，不会对后续元素的布局造成影响。

缺点

  • transform 为 CSS3 属性，有兼容性问题

flex + justify-content + align-items

  1. <div class="parent">
  2.   <div class="child">Demo</div>
  3. </div>
  5. <style>
  6.   .parent {
  7.     display: flex;
  8.     justify-content: center;
  9.     align-items: center;
  10.   }
  11. </style>

优点

  • 只需设置父节点属性，无需设置子元素

缺点

  • 有兼容性问题

多列布局

多列布局在网页中非常常见（例如两列布局），多列布局可以是两列定宽，一列自适应， 或者多列不定宽一列自适应还有等分布局等。

一列定宽，一列自适应

布局解决方案 - 图4

float + margin

  1. <div class="parent">
  2.   <div class="left">
  3.     <p>left</p>
  4.   </div>
  5.   <div class="right">
  6.     <p>right</p>
  7.     <p>right</p>
  8.   </div>
  9. </div>
  11. <style>
  12.   .left {
  13.     float: left;
  14.     width: 100px;
  15.   }
  16.   .right {
  17.     margin-left: 100px
  18.     /*间距可再加入 margin-left */
  19.   }
  20. </style>

NOTE：IE 6 中会有3像素的 BUG，解决方法可以在 .left
加入 margin-left:-3px。

float + margin + (fix) 改造版

  1. <div class="parent">
  2.   <div class="left">
  3.     <p>left</p>
  4.   </div>
  5.   <div class="right-fix">
  6.     <div class="right">
  7.       <p>right</p>
  8.       <p>right</p>
  9.     </div>
  10.   </div>
  11. </div>
  13. <style>
  14.   .left {
  15.     float: left;
  16.     width: 100px;
  17.   }
  18.   .right-fix {
  19.     float: right;
  20.     width: 100%;
  21.     margin-left: -100px;
  22.   }
  23.   .right {
  24.     margin-left: 100px
  25.     /*间距可再加入 margin-left */
  26.   }
  27. </style>

NOTE：此方法不会存在 IE 6 中3像素的 BUG，但 .left 不可选择，
需要设置 .left {position: relative} 来提高层级。
此方法可以适用于多版本浏览器（包括 IE6）。缺点是多余的 HTML 文本结构。

float + overflow

  1. <div class="parent">
  2.   <div class="left">
  3.     <p>left</p>
  4.   </div>
  5.   <div class="right">
  6.     <p>right</p>
  7.     <p>right</p>
  8.   </div>
  9. </div>
  11. <style>
  12.   .left {
  13.     float: left;
  14.     width: 100px;
  15.   }
  16.   .right {
  17.     overflow: hidden;
  18.   }
  19. </style>

设置 overflow: hidden 会触发
BFC 模式（Block Formatting Context）块级格式化文本。
BFC 中的内容与外界的元素是隔离的。

优点

  • 样式简单

缺点

  • 不支持 IE 6

table

  1. <div class="parent">
  2.   <div class="left">
  3.     <p>left</p>
  4.   </div>
  5.   <div class="right">
  6.     <p>right</p>
  7.     <p>right</p>
  8.   </div>
  9. </div>
  11. <style>
  12.   .parent {
  13.     display: table;
  14.     width: 100%;
  15.     table-layout: fixed;
  16.   }
  17.   .left {
  18.     display: table-cell;
  19.     width: 100px;
  20.   }
  21.   .right {
  22.     display: table-cell;
  23.     /*宽度为剩余宽度*/
  24.   }
  25. </style>

table 的显示特性为每列的单元格宽度合一定等与表格宽度。
table-layout: fixed; 可加速渲染，也是设定布局优先。

NOTE：table-cell 中不可以设置 margin 但是可以通过 padding 来设置间距。

flex

  1. <div class="parent">
  2.   <div class="left">
  3.     <p>left</p>
  4.   </div>
  5.   <div class="right">
  6.     <p>right</p>
  7.     <p>right</p>
  8.   </div>
  9. </div>
  11. <style>
  12.   .parent {
  13.     display: flex;
  14.   }
  15.   .left {
  16.     width: 100px;
  17.     margin-left: 20px;
  18.   }
  19.   .right {
  20.     flex: 1;
  21.     /*等价于*/
  22.     /*flex: 1 1 0;*/
  23.   }
  24. </style>

NOTE：flex-item 默认为内容宽度。

缺点

  • 低版本浏览器兼容问题
  • 性能问题，只适合小范围布局。

两列定宽，一列自适应

布局解决方案 - 图5

  1. <div class="parent">
  2.   <div class="left">
  3.     <p>left</p>
  4.   </div>
  5.   <div class="center">
  6.     <p>center<p>
  7.   </div>
  8.   <div class="right">
  9.     <p>right</p>
  10.     <p>right</p>
  11.   </div>
  12. </div>
  14. <style>
  15.   .left, .center {
  16.     float: left;
  17.     width: 100px;
  18.     margin-right: 20px;
  19.   }
  20.   .right {
  21.     overflow: hidden;
  22.     /*等价于*/
  23.     /*flex: 1 1 0;*/
  24.   }
  25. </style>

多列定宽的实现可以更具单列定宽的例子进行修改与实现。

一列不定宽加一列自适应

布局解决方案 - 图6

不定宽的宽度为内容决定，下面为可以实现此效果的方法：

  • float + overflow，此方法在 IE6 中有兼容性问题
  • table，此方法在 IE6 中有兼容性问题
  • flex，此方法在 IE9及其以下版本中有兼容性问题

多列不定宽加一列自适应

布局解决方案 - 图7

其解决方案同一列不定宽加一列自适应相仿。

多列等分布局

布局解决方案 - 图8

每一列的宽度和间距均相等，下面为多列等分布局的布局特定。

布局解决方案 - 图9

父容器宽度为 C，C = W * N + G * N - G => C + G = (W + G) * N。

布局解决方案 - 图10

float

布局解决方案 - 图11

  1. <div class="parent">
  2.   <div class="column">
  3.     <p>1</p>
  4.   </div>
  5.   <div class="column">
  6.     <p>2</p>
  7.   </div>
  8.   <div class="column">
  9.     <p>3</p>
  10.   </div>
  11.   <div class="column">
  12.     <p>4</p>
  13.   </div>
  14. </div>
  15. <style media="screen">
  16.   .parent {
  17.     margin-left: -20px;
  18.   }
  19.   .column {
  20.     float: left;
  21.     width: 25%;
  22.     padding-left: 20px;
  23.     box-sizing: border-box;
  24.   }
  25. </style>

NOTE：此方法可以完美兼容 IE8 以上版本。
NOTE+：此方法结构和样式具有耦合性。

table

  1. <div class='parent-fix'>
  2.   <div class="parent">
  3.     <div class="column">
  4.       <p>1</p>
  5.     </div>
  6.     <div class="column">
  7.       <p>2</p>
  8.     </div>
  9.     <div class="column">
  10.       <p>3</p>
  11.     </div>
  12.     <div class="column">
  13.       <p>4</p>
  14.     </div>
  15.   </div>
  16. </div>
  18. <style media="screen">
  19.   .parent-fix {
  20.     margin-left: -20px;
  21.   }
  22.   .parent {
  23.     display: table;
  24.     width: 100%;
  25.     /*可以布局优先，也可以单元格宽度平分在没有设置的情况下*/
  26.     table-layout: fixed;
  27.   }
  28.   .column {
  29.     display: table-cell;
  30.     padding-left: 20px;
  31.   }
  32. </style>

NOTE：缺点是多了文本结果

flex

  1. <div class="parent">
  2.   <div class="column">
  3.     <p>1</p>
  4.   </div>
  5.   <div class="column">
  6.     <p>2</p>
  7.   </div>
  8.   <div class="column">
  9.     <p>3</p>
  10.   </div>
  11.   <div class="column">
  12.     <p>4</p>
  13.   </div>
  14. </div>
  17. <style media="screen">
  18.   .parent {
  19.     display: flex;
  20.   }
  21.   .column {
  22.     /*等价于 flex: 1 1 0;*/
  23.     flex: 1;
  24.   }
  25.   .column+.column {
  26.     margin-left: 20px;
  27.   }
  28. </style>

NOTE：flex 的特性为分配剩余空间。
NOTE+：兼容性有问题。

#

布局解决方案 - 图12

table

table 的特性为每列等宽，每行等高可以用于解决此需求。

  1. <div class="parent">
  2.   <div class="left">
  3.     <p>left</p>
  4.   </div>
  5.   <div class="right">
  6.     <p>right</p>
  7.     <p>right</p>
  8.   </div>
  9. </div>
  11. <style>
  12.   .parent {
  13.     display: table;
  14.     width: 100%;
  15.     table-layout: fixed;
  16.   }
  17.   .left {
  18.     display: table-cell;
  19.     width: 100px;
  20.   }
  21.   .right {
  22.     display: table-cell;
  23.     /*宽度为剩余宽度*/
  24.   }
  25. </style>

flex

  1. <div class="parent">
  2.   <div class="left">
  3.     <p>left</p>
  4.   </div>
  5.   <div class="right">
  6.     <p>right</p>
  7.     <p>right</p>
  8.   </div>
  9. </div>
  11. <style>
  12.   .parent {
  13.     display: flex;
  14.   }
  15.   .left {
  16.     width: 100px;
  17.     margin-left: 20px;
  18.   }
  19.   .right {
  20.     flex: 1;
  21.     /*等价于*/
  22.     /*flex: 1 1 0;*/
  23.   }
  24. </style>

NOTE：flex 默认的 align-items 的值为 stretch。

float

  1. <div class="parent">
  2.   <div class="left">
  3.     <p>left</p>
  4.   </div>
  5.   <div class="right">
  6.     <p>right</p>
  7.     <p>right</p>
  8.   </div>
  9. </div>
  11. <style>
  12.   .parent {
  13.     overflow: hidden;
  14.   }
  15.   .left,
  16.   .right {
  17.     padding-bottom: 9999px;
  18.     margin-bottom: -9999px;
  19.   }
  20.   .left {
  21.     float: left;
  22.     width: 100px;
  23.     margin-right: 20px;
  24.   }
  25.   .right {
  26.     overflow: hidden;
  27.   }
  28. </style>

NOTE：此方法为伪等高（只有背景显示高度相等），左右真实的高度其实不相等。
NOTE+：此方法兼容性较好。

全屏布局

布局解决方案 - 图13

例如管理系统，监控与统计平台均广泛的使用全屏布局。

定宽需求

布局解决方案 - 图14

实现方案

  • Position 常规方案
  • Flex CSS3 新实现

Position

  1. <div class="parent">
  2.   <div class="top"></div>
  3.   <div class="left"></div>
  4.   <div class="right">
  5.     /*辅助结构用于滚动*/
  6.     <div class="inner"></div>
  7.   </div>
  8.   <div class="bottom"></div>
  9. </div>
  10. <style>
  11.   html,
  12.   body,
  13.   .parent {
  14.     height: 100%;
  15.     /*用于隐藏滚动条*/
  16.     overflo: hidden;
  17.   }
  18.   .top {
  19.     /*相对于 body 定位*/
  20.     position: absolute;
  21.     top: 0;
  22.     left: 0;
  23.     right: 0;
  24.     height: 100px;
  25.   }
  26.   .left {
  27.     position: absolute;
  28.     left: 0;
  29.     top: 100px;
  30.     bottom: 50px;
  31.     width: 200px;
  32.   }
  33.   .right {
  34.     position: absolute;
  35.     left: 200px;
  36.     right: 0;
  37.     top: 100px;
  38.     bottom: 50px;
  39.     overflow: auto;
  40.   }
  41.   .right .inner {
  42.     /*此样式为演示所有*/
  43.     min-height: 1000px;
  44.   }
  45.   .bottom {
  46.     position: absolute;
  47.     left: 0;
  48.     right: 0;
  49.     bottom: 0;
  50.     height: 50px;
  51.   }
  52. </style>
Position 兼容

此方法不支持 IE6 可以使用下面的方法解决兼容问题。

  1. <div class="g-hd"></div>
  2. <div class="g-sd"></div>
  3. <div class="g-mn"></div>
  4. <div class="g-ft"></div>
  5. <style>
  6.   html,
  7.   body {
  8.     width: 100%;
  9.     height: 100%;
  10.     overflow: hidden;
  11.     margin: 0;
  12.   }
  14.   html {
  15.     _height: auto;
  16.     _padding: 100px 0 50px;
  17.   }
  19.   .g-hd,
  20.   .g-sd,
  21.   .g-mn,
  22.   .g-ft {
  23.     position: absolute;
  24.     left: 0;
  25.   }
  27.   .g-hd,
  28.   .g-ft {
  29.     width: 100%;
  30.   }
  32.   .g-sd,
  33.   .g-mn {
  34.     top: 100px;
  35.     bottom: 50px;
  36.     _height: 100%;
  37.     overflow: auto;
  38.   }
  40.   .g-hd {
  41.     top: 0;
  42.     height: 100px;
  43.   }
  45.   .g-sd {
  46.     width: 300px;
  47.   }
  49.   .g-mn {
  50.     _position: relative;
  51.     left: 300px;
  52.     right: 0;
  53.     _top: 0;
  54.     _left: 0;
  55.     _margin-left: 300px;
  56.   }
  58.   .g-ft {
  59.     bottom: 0;
  60.     height: 50px;
  61.   }
  62. </style>

Flex

  1. <div class="parent">
  2.   <div class="top"></div>
  3.   <div class="middle">
  4.     <div class="left"></div>
  5.     <div class="right">
  6.       <div class="inner"></div>
  7.     </div>
  8.   </div>
  9.   <div class="bottom"></div>
  10. </div>
  11. <style media="screen">
  12.   html,
  13.   body,
  14.   parent {
  15.     height: 100%;
  16.     overflow: hidden;
  17.   }
  19.   .parent {
  20.     display: flex;
  21.     flex-direction: column;
  22.   }
  24.   .top {
  25.     height: 100px;
  26.   }
  28.   .bottom {
  29.     height: 50px;
  30.   }
  32.   .middle {
  33.     // 居中自适应
  34.     flex: 1;
  35.     display: flex;
  36.     /*flex-direction: row 为默认值*/
  37.   }
  39.   .left {
  40.     width: 200px;
  41.   }
  43.   .right {
  44.     flex: 1;
  45.     overflow: auto;
  46.   }
  47.   .right .inner {
  48.     min-height: 1000px;
  49.   }
  50. </style>
Flex 兼容性

CSS3 中的新概念所有 IE9 及其也行版本都不兼容。

百分比宽度需求

布局解决方案 - 图15

只需把定宽高（px 为单位的值）的实现改成百分比（%）既可。

内容自适应

布局解决方案 - 图16

只有右侧栏占据剩余位置，其余空间均需根据内容改变。
所以 Postion 的定位方法不适合实现此方案。下面列出了两种布局方案：

  • Flex
  • Grid，W3C 草案并不稳定，浏览器支持也并不理想

Flex

只有不为宽高做出限制，既可对其中的内容做出自适应的布局。

  1. <div class="parent">
  2.   <div class="top"></div>
  3.   <div class="middle">
  4.     <div class="left"></div>
  5.     <div class="right">
  6.       <div class="inner"></div>
  7.     </div>
  8.   </div>
  9.   <div class="bottom"></div>
  10. </div>
  12. <style media="screen">
  13.   html,
  14.   body,
  15.   parent {
  16.     height: 100%;
  17.     overflow: hidden;
  18.   }
  20.   .parent {
  21.     display: flex;
  22.     flex-direction: column;
  23.   }
  25.   .middle {
  26.     // 居中自适应
  27.     flex: 1;
  28.     display: flex;
  29.     /*flex-direction: row 为默认值*/
  30.   }
  32.   .right {
  33.     flex: 1;
  34.     overflow: auto;
  35.   }
  36.   .right .inner {
  37.     min-height: 1000px;
  38.   }
  39. </style>

方案比较

方案 兼容性 性能 自适应
Position 好 好 部分自适应
Flex 较差 差 可自适应
Grid 差 较好 可自适应