您的位置:首页 > Web前端 > CSS

两栏布局自适应主流方法

2017-02-24 01:48 197 查看


<div class='container'>
<div class='left'>1</div>
<div class='right'>2</div>
</div>


//1: absolute + padding + %
.container{padding-left: 200px; position: relative;}
.left{height: 200px; position: absolute; left: 0;}
.right{width: 100%;}    //block元素, width可不设


//2: float + BFC
.left{float: left; width: 200px;}
.right{overflow: hidden;}


//3: flex
.container{display: flex;}
.left{width: 200px;}
.right{flex: 1;}


By: chocking
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  CSS CSS3