常见的页面布局(两栏布局、三栏布局)

两栏布局,左边定宽，右边自适应

• 左边左浮动，右边加oveflow:hidden;变成BFC清除左侧浮动元素的影响

#left{
	float: left;
    width: 200px;
    background: green;
}
#right{
    overflow: hidden;
    background: red;
}

三栏布局(圣杯布局、双飞翼布局)

圣杯布局和双飞翼布局都是用来做三栏布局的，左右定宽，中间自适应

圣杯布局

dom结构

<div id="container">
  // 把center放在最前面,假如网卡的时候最先加载的是中间的,突出中间的
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
</div>

css样式

#container {
  // 把左右两边的内容用padding撑出来
  padding-left: 200px; 
  padding-right: 150px;
}

// 现在的样式结构为 左右两边为空白,中间上边是center,下面左边是left,右边是right
#container .column {
  float: left;
}
#center {
  width: 100%;
}
#left {
  width: 200px; 
}
#right {
  width: 150px; 
}

将left放置到之前预留出的位置上，这里使用负外边距

#left {
  width: 200px; 
  margin-left: -100%;
}

随后还需要使用定位(position)方法：

#left {
  width: 200px; 
  margin-left: -100%;
  position: relative;
  right: 200px;
}

#right {
  width: 150px; 
  margin-right: -150px; 
}

双飞翼布局

• dom结构

<div id="container" class="column">
	<div id="center"></div>
</div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>

• css样式

// 现在的样式结构为左右两边预留的间距,中间为center,下面左边为left,右边为right
#container {
  width: 100%;
}
.column {
  float: left;
}
#center {
  margin-left: 200px;
  margin-right: 150px;
}
#left {
  width: 200px; 
}
#right {
  width: 150px; 
}

• 将left放置到预留位置

#left {
  width: 200px; 
  margin-left: -100%;
}

• 将right放置到预留位置

#right {
  width: 150px; 
  margin-left: -150px;
}