【布局】CSS布局方案

[ly2011]

【布局】CSS 布局方案

[TOC]

居中布局

以下布局均以不定宽为前提，定宽情况包含其中

1、水平居中

1.1 inline-block + text-align

.parent {
  text-align: center;
}
.child {
  display: inline-block;
}

tips: 此方案兼容性较好，可兼容至 IE8,对于 IE567 并不支持 inline-block,需要使用 css hack 进行兼容。

1.2 table + margin

.child {
  display: table;
  margin: 0 auto;
}

tips: 此方案兼容至 IE8,可以使用<table/>代替 css 写法，兼容性良好。

1.3 absolute + transform

.parent {
  position: relative;
  height: 1.5em;
}
.child {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

tips: 此方案兼容至 IE9,因为 transform 兼容性限制，如果.child为定宽元素，可以使用以下写法，兼容性极佳。

.parent {
  position: relative;
  height: 1.5em;
}
.child {
  position: absolute;
  width: 100px;
  left: 50%;
  margin-left: -50px;
}

1.4 flex + justify-content

.parent {
  display: flex;
  justify-content: center;
}
.child {
  margin: 0 auto;
}

tips: 移动端兼容性良好

2.垂直居中

2.1 table-cell + vertical-align

.parent {
  display: table-cell;
  vertical-align: middle;
}

tips: 可替换为 <table/> 布局，兼容性良好。

2.2 absolute + transform

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

tips: 存在 css3 兼容性问题，定宽兼容性良好。

2.3 flex + align-items

.parent {
  display: flex;
  align-items: center;
}

3. 水平垂直居中

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

.parent {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
.child {
  display: inline-block;
}

tips: 兼容至 IE8

3.2 absolute + transform

.parent {
  position: relative;
}
.child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

3.3 flex

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

多列布局

1. 一列定宽，一列自适应

1.1 float + margin

.left {
  float: left;
  width: 100px;
}
.right {
  margin-left: 120px;
}

tips: 此方案对于定宽布局比较好，不定宽布局推荐方案 1.2

1.2 float + overflow

.left {
  float: left;
  width: 100px;
  margin-right: 20px;
}
.right {
  overflow: hidden;
}

tips: 兼容性极好，此方案不管是多列定宽或是不定宽都可以完美实现,且可以实现等高布局。

1.3 table

.parent {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.left,
.right {
  display: table-cell;
}
.left {
  width: 100px;
  padding-right: 20px;
}

1.4 flex

.parent {
  display: flex;
}
.left {
  width: 100px;
  padding-right: 20px;
}
.right {
  flex: 1;
}

2. 多列定宽，一列自适应

2.1 float + overflow

.left,
.center {
  float: left;
  width: 100px;
  margin-right: 20px;
}
.right {
  overflow: hidden;
}

2.2 table

.parent {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.left,
.center,
.right {
  display: table-cell;
}
.right {
  width: 100px;
  padding-right: 20px;
}

2.3 flex

.parent {
  display: flex;
}
.left,
.center {
  width: 100px;
  padding-right: 20px;
}
.right {
  flex: 1;
}

3. 一列不定宽，一列自适应

3.1 float + overflow

.left {
  float: left;
  margin-right: 20px;
}
.right {
  overflow: hidden;
}
.left p {
  width: 200px;
}

3.2 table

.parent {
  display: table;
  width: 100%;
}
.left,
.right {
  display: table-cell;
}
.left {
  width: 0.1%;
  padding-right: 20px;
}
.left p {
  width: 200px;
}

3.3 flex

.parent {
  display: flex;
}
.left {
  margin-right: 20px;
}
.right {
  flex: 1;
}
.left p {
  width: 200px;
}

4. 多列不定宽，一列自适应

4.1 float + overflow

.left,
.center {
  float: left;
  margin-right: 20px;
}
.right {
  overflow: hidden;
}
.left p,
.center p {
  width: 100px;
}

5. 等分

5.1 float + margin

.parent {
  margin-left: -20px;
}
.column {
  float: left;
  width: 25%;
  padding-left: 20px;
  box-sizing: border-box;
}

5.2 table + margin

.parent-fix {
  margin-left: -20px;
}
.parent {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.column {
  display: table-cell;
  padding-left: 20px;
}

5.3 flex

.parent {
  display: flex;
}
.column {
  flex: 1;
}
.column + .column {
  margin-left: 20px;
}

6. 等高

6.1 float + overflow

.parent {
  overflow: hidden;
}
.left,
.right {
  padding-bottom: 9999px;
  margin-bottom: -9999px;
}
.left {
  float: left;
  width: 100px;
}
.right {
  overflow: hidden;
}

6.2 table

.parent {
  display: table;
  width: 100%;
}
.left {
  display: table-cell;
  width: 100px;
  margin-right: 20px;
}
.right {
  display: table-cell;
}

6.3 flex

.parent {
  display: flex;
  width: 100%;
}
.left {
  width: 100px;
}
.right {
  flex: 1;
}

并排等分，单排对其靠左布局

flex

.main {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.item {
  display: inline-block;
}
.empty {
  height: 0;
  visibility: hidden;
}

圣杯布局&双飞翼布局

参考文档

1. 【布局】CSS布局方案