css左右两栏等高布局效果

两栏等高布局实现方法主要是给左右两栏的样式都加上margin-bottom: -9999px;padding-bottom: 9999px;这样子两栏内容不一样的时候也会撑开跟另外一栏高度一样。

案例：

<style type="text/css">
	.container {
		margin: auto;
		max-width: 600px;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
	}
	.column-left,
	.column-right {
		flex: 1;
		color: #fff;
		padding: 20px;
		margin-bottom: -9999px;
		padding-bottom: 9999px;
	}
	.column-left {
		background-color: #34538b;
	}
	.column-right {
		background-color: #cd0000;
	}
</style>

<div class="container">
	<div id="colLeft" class="column-left">
		<h4>正方观点</h4>
		<p>观点1</p>
		<p>观点1</p>
		<p>观点1</p>
		<p>观点1</p>
	</div>
	<div id="colRight" class="column-right">
		<h4>反方观点</h4>
		<p>观点1</p>
	</div>
</div>

效果：

本文作者： Jasmine

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

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