css实现多种方法多列等高布局

多列等高，要求左右两列高度自适应且一样，分别设置不同背景色.分别是以下几种方式:

 1.padding + margin + overflow 实现多列等高效果，兼容性好

 2.border实现多列等高，左边框宽度为200px，左列浮动，伪元素清除浮动

 3.父元素线性渐变背景色实现多列等高（同理各种颜色障眼法）

 4.display：flex实现多列等高

 5.display：grid实现多列等高

 6.display:table-cell 实现多列等高

代码:

<div class="g-container">
	<h2>padding + margin + overflow，实现多列等高效果，兼容性好</h2>
	<div class="g-padmar">
		<div class="g-left">
			content<br/>
		</div>
		<div class="g-right">
			content<br/>
			content<br/>
			content<br/>
			content<br/>
		</div>
	</div>
	
	<h2>border实现多列等高，左边框宽度为200px，左列浮动，伪元素清除浮动</h2>
	<div class="g-border">
		<div class="g-left">
			content<br/>
		</div>
		<div class="g-right">
			content<br/>
			content<br/>
			content<br/>
			content<br/>
		</div>
	</div>
	
	<h2>父元素线性渐变背景色实现多列等高（同理各种颜色障眼法）</h2>
	<div class="g-lineargradient">
		<div class="g-left">
			content<br/>
		</div>
		<div class="g-right">
			content<br/>
			content<br/>
			content<br/>
			content<br/>
		</div>
	</div>
	
	<h2>display：flex实现多列等高</h2>
	<div class="g-flex">
		<div class="g-left">
			content<br/>
		</div>
		<div class="g-right">
			content<br/>
			content<br/>
			content<br/>
			content<br/>
		</div>
	</div>
	
	<h2>display：grid实现多列等高</h2>
	<div class="g-grid">
		<div class="g-left">
			content<br/>
		</div>
		<div class="g-right">
			content<br/>
			content<br/>
			content<br/>
			content<br/>
			content<br/>
		</div>
	</div>
	
	<h2>display:table-cell 实现多列等高</h2>
	<div class="g-table">
		<div class="g-left">
			content<br/>
		</div>
		<div class="g-right">
			content<br/>
			content<br/>
			content<br/>
			content<br/>
			content<br/>
		</div>
	</div>
</div>

h2 {
  text-align: center;
  line-height: 60px;
  font-size: 20px;
  background: #00bcd4;
  color: #fff;
}

.g-container {
  width: 1000px;
  margin: 0 auto;
  line-height: 2;
  color: #fff;
}
.g-container > div {
  margin-bottom: 50px;
}
/* 1.padding + margin + overflow 实现多列等高效果，兼容性好 */
.g-padmar {
  position: relative;
  overflow: hidden;
}
.g-padmar .g-left {
  float: left;
  width: 200px;
  background: #4caf50;
  padding-bottom: 9999px;
  margin-bottom: -9999px;
}
.g-padmar .g-right {
  float: left;
  width: 800px;
  background: #99afe0;
  padding-bottom: 9999px;
  margin-bottom: -9999px;
}
/* 2.border实现多列等高，左边框宽度为200px，左列浮动，伪元素清除浮动 */
.g-border {
  position: relative;
  width: 800px;
  border-left: 200px solid #4caf50;
  background: #99afe0;
}
.g-border::after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
}
.g-border .g-right {
  width: 800px;
}
.g-border .g-left {
  float: left;
  width: 200px;
  margin-left: -200px;
}

/* 3.父元素线性渐变背景色实现多列等高（同理各种颜色障眼法） */
.g-lineargradient {
  background: linear-gradient(90deg, #4caf50 0, #4caf50 20%, #99afe0 20%, #99afe0);
  overflow: hidden;
}
.g-lineargradient .g-left {
  float: left;
  width: 200px;
}
.g-lineargradient .g-right {
  float: left;
  width: 800px;
}

/* 4.display：flex实现多列等高 */
.g-flex {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
}
.g-flex .g-left {
  flex: 200px 0 0;
  background: #4caf50;
}
.g-flex .g-right {
  flex: auto 1 0;
  background: #99afe0;
}

/* 5.display：grid实现多列等高 */
.g-grid {
  display: grid;
  grid-template-columns: 200px auto;
}
.g-grid .g-left {
  background: #4caf50;
}
.g-grid .g-right {
  background: #99afe0;
}

/* 6.display:table-cell 实现多列等高 */
.g-table {
  overflow: hidden;
  display: table;
}
.g-table .g-left {
  width: 200px;
  display: table-cell;
  background: #4caf50;
}
.g-table .g-right {
  width: 800px;
  display: table-cell;
  background: #99afe0;
}

效果:

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/706

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！