2.1 简介
大家在进行页面布局的时候,可能会遇见两栏式布局与三栏式布局,如下图所示:
- 两栏式
例子:
- 三栏式
2.2 方法
2.2.1 两栏式
.left-pane{
width: 14%;
height: 1000px;
float: left;
}
.right-pane{
width: 86%;
height: 1000px;
overflow: hidden;
}
提示: 本例中,我们将左边div进行左浮动,将右边的div变成BFC容器,并通过设置width百分比,实现铺满整个屏幕。这里的高度百分之百
2.2.2 三栏式
<div class="left" ></div>
<div class="right"></div>
<div class="center"></div>
.left{
height: 400px;
width: 20%;
float: left;
background-color: red;
}
.center{
overflow: hidden;
height: 400px;
width: 60%;
background-color: blue;
}
.right{
height: 400px;
width: 20%;
float: right;
background-color: black;
}
提示: 值得一提的是,三栏式布局在html结构上,需要先写左右两边的div,然后再写中间的div。
这是一个不痛不痒的问题,对于大多数人而言,并没有什么技术含量,并且实现方法应该不止这一种。但是,希望此文能对少部分人员,给予微不足道的帮助。留有此文,解今日之惑,便他日之需。