【CSS笔记】实现等高栏位

第一种:border

解说:利用中间栏位的border-left与border-right来实现视觉上的等高效果，但缺点很明显:「左右两边内容超出中间栏位时，会露出」

<!-- html --><div class="box">  <div class="left">    <p>test string!</p>  </div>  <div class="center">    <p>test string!</p>    <p>test string!</p>  </div>  <div class="right">    <p>test string!</p>  </div></div>

/* Css */.box {  position:realtive;}.left,.right {  position: absolute;  top: 0;  width: 300px;}.left {  left: 0;  text-align: right;}.right {  right: 0;}.center {  border-left: 300px solid #cd0000;  border-right: 300px solid #036;  background-color: #0fa;  text-align: center;}

点这里看codepen

第二种: 负margin

解说:利用特大padding-bottom增加尺寸(高度)，再用负的margin-bottom把后面的元素给拉上来!

<!-- html --><div class="box">  <div class="item left">    <p>test string!</p>  </div>  <div class="item center">    <p>test string!</p>    <p>test string!</p>    <p>test string!</p>  </div>  <div class="item right">    <p>test string!</p>  </div></div>

/* Css */.box {  overflow: hidden;}.item {  float: left;  padding-bottom: 9999px;  margin-bottom: -9999px;}.left {  background: #036;}.center {  width: 50%;  background: #0fa;}.right {  background: #cd0000;}.left,.right {  width: 25%;}

点这里看codepen

第三种: table-cell

解说:table-cell本身就是等高，所以可以用table-cell来达成真的等高的效果。

<div class="box">  <div class="item left"><p>test string!</p>    <p>test string!</p>    <p>test string!</p>    <p>test string!</p>    <p>test string!</p>  </div>  <div class="item center">    <p>test string!</p>    <p>test string!</p>    <p>test string!</p>  </div>  <div class="item right">    <p>test string!</p>  </div></div>

.box {  display: table;  width: 100%;  table-layout: fixed;  box-shadow: 0 0 1px #cd0000;  text-align:center;}.item {  display: table-cell;}.center {  background: #0fa;}.right {  background: #cd0000;}.left {  background: #036;}

点这里看codepen

第四种:absolute

解说:利用absolute的top与bottom称满父元素高度，达成等高效果。(所有的html配置都一样，就直接PO上CSS了!)
缺点也是很明显，因为子元素依靠absolute来拉称高度的关係，父元素要有高度才行，子元素自己本身也不能自
行扩充高度。

.box {  position: relative;  padding-bottom: 300px;}.item {  position: absolute;  text-align: center;  top: 0;  bottom: 0;}.left {  left: 0;  right: 70%;  background: #036;}.right {  right: 0;  left: 70%;  background: #cd0000;}.center {  left:30%;  right:30%;  background: #0fa;}

点这里看codepen

第五种:flex

解说:利用橡皮筋的弹性盒子本身的特性，来达成等高了效果。

<div class="box">  <div class="item left">    <p>test string!</p>    <p>test string!</p>    <p>test string!</p>    <p>test string!</p>    <p>test string!</p>  </div>  <div class="item center">    <p>test string!</p>    <p>test string!</p>    <p>test string!</p>  </div>  <div class="item right">    <p>test string!</p>  </div></div>

.box {  display:flex;}.item {  width: 0;  flex:1;  margin: 0 auto;  text-align: center;}.left {  background: #036;}.right {  background: #cd0000;}.center {  background: #0fa;}

点这里看codepen

心得

主要写这篇做个CSS的笔记，如何达成等高的效果，除了上面这五种方式外，也可以使用grid来实现，或是利用js来控制元素的高度
。上面这五种最大的分别就是「视觉上」、「实际上」的等高与浏览器的兼容性，像是首两种border与负margin就属于视觉上的等高，看起来是一样高的，但其实只是利用视觉上的呈现来让人觉得是等高的!而table-cell与flex实现的就是天然的等高。