首页 > itarticle > 实现等高布局的方法

实现等高布局的方法

admin 11月 11, 2020 0

1.利用border和margin实现等高布局

CSS

.clear { zoom: 1;}
.clear:after { content: ''; clear: both; display: block;}

.wrap { background: pink; border-left: 200px solid green; border-right: 200px solid brown;}
.left { float: left; margin-left: -200px; width: 200px;}
.right { float: right; margin-right: -300px; width: 300px;}
.center {}

HTML

<div class="wrap clear">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
</div>

通过设置包裹层的border，作为左右侧栏的背景颜色，实现等高布局；设置左右侧栏的margin值使内容显示在内容区域。