浅谈css两栏布局

2017-01-07 19:11:52来源:CSDN作者:dcwang316人点击

两栏布局,在开发过程中经常遇到,就工作中的问题随便写点;

<div class="wrap">
<div class="left">左</div>
<div class="right">右
<p>123123131</p>
<p>123123131</p>
<p>123123131</p>
<p>123123131</p>
<p>123123131</p>
<p>123123131</p>
<p>123123131</p>
<p>123123131</p>
</div>
</div>

.wrap{
width:1200px;
height:100px;
margin:0 auto;
}
.left{
float: left;
width:200px;
height:100px;
background-color: blue;
}
.right{
background-color: red;
height: 400px;
}

效果图:


.left左浮动之后会与right重叠,而且可以看出当right的内容高度比left高的时候,right高出的内容会从左侧排列;解决这种样式的方法可以有

1..right{
background-color: red;
height: 400px;
padding-left: 200px;
}

给right设置一个padding-left;

效果图

另外还可以利用bfc的特性,触发right的bfc

.right{
background-color: red;
height: 400px;
overflow: auto;
}

效果图:

很明显,此时right不再与left重叠,而且right的宽度是自适应的,看各人喜好,再选择合适的方式

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台