CSS两栏布局
两栏布局(左侧宽度固定,右侧自适应),在学习的过程中总结了几种方法:
方法一:float+margin-left
HTML部分
<div class="left">
<h1>Left Side</h1>
<p>我是左侧栏</p>
</div>
<div class="right">
<h1>Right Side</h1>
<p>我是右侧栏</p>
</div>
CSS部分
*{
/*清除默认格式*/
margin:0;
padding:0;
}
.left{
width:200px;
background-color:red;
float:left;
}
.right{
background-color:green;
margin-left:200px;//等于左边栏的宽度
}
图:
方法二:absolute+margin-left
CSS部分
*{
margin:0;
padding:0;
}
.left{
width:100px;
background-color:red;
position:absolute;
}
.right{
background-color:green;
margin-left:100px;
}
方法三:float+BFC
为左侧元素设置浮动后,左侧元素会因为浮动盖在右侧元素上,因此要将右侧元素变成BFC,BFC是一个独立的区域,不会让BFC外的元素对其内部造成干扰。当右侧元素变成一个BFC时它的元素边界会发生变化,会紧紧贴合左侧的元素。
常见的右侧元素设置—-overflow:hidden;
方法四:flex布局
HTML部分
<div class="box">
<div class="left">
<h1>Left Side</h1>
<p>我是左侧栏</p>
</div>
<div class="right">
<h1>Right Side</h1>
<p>我是右侧栏</p>
</div>
</div>
CSS设置:
*{
/*清除默认格式*/
margin:0;
padding:0;
}
.box{
display:flex;
}
.box1{
}
.box2{
flex:1;
}
图示:
想要了解更多flex布局,可参见阮一峰的教程
方法五:grid网格布局
待补充