HCJ2：页面两栏式或三栏式布局

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。

---

这是一个不痛不痒的问题，对于大多数人而言，并没有什么技术含量，并且实现方法应该不止这一种。但是，希望此文能对少部分人员，给予微不足道的帮助。留有此文，解今日之惑，便他日之需。