关于HTML的基本布局（三）

HTML的常用布局模板

• 三栏式布局（margin+position）

1.两边盒子固定宽度，中间盒子自适应

DOM文档中结构如下：

<div class="parent">  
    <div class="left"></div>  
    <div class="main">字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>  
    <div class="right"></div>  
</div>

css样式：

.parent{width:100%; background-color:#ccc; margin:0 auto; position:relative;}
.left{width:200px; background-color:blue; height:300px; position:absolute; left:0; top:0;}
.right{width:200px; background-color:green;height:300px; position:absolute; right:0; top:0;}
.main{background-color:red; color:#fff;height:300px; margin:0 200px 0 200px;}

效果图：

2.利用定位左右两栏

3.利用左右浮动做左右两栏

• 圣杯布局（float+负margin+padding+position）

步骤：

1. 父元素包含左中右三个盒子，分别左浮动
2. 中间元素宽度100%（必须为第一个渲染）
3. 用margin-left的负值将两边盒子拉上去和中间盒子同行（左边-100%，右边-右盒子宽度）
4. 父元素用左右padding为左右盒子留位置
5. 用相对定位将左右元素移动到正确的位置上
6. 给父元素上清除浮动

DOM文档中结构如下：

<div class="parent">  
    <div class="main">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>  
    
    <div class="right"></div>  
</div> 

css样式：

.parent{width:100%; background-color:#ccc; margin:0 auto; padding:0 200px 0 200px; box-sizing:border-box; overflow:hidden;} 
.left{width:200px; background-color:blue; height:300px; float:left; margin-left:-100%; position:relative; left:-200px;}
.right{width:200px; background-color:green;height:300px; float:left; margin-left:-200px; position:relative; right:-200px;}
.main{width:100%;background-color:red; color:#fff;height:300px; float:left;}

效果图：

• 双飞翼布局（float+负margin+margin）

步骤：

1. 父元素包含左中右三个盒子，分别左浮动
2. 中间元素宽度100%（必须为第一个渲染）
3. 用margin-left的负值将两边盒子拉上去和中间盒子同行（左边-100%，右边-右盒子宽度）
4. 给中间元素设置子元素，并给其左右margin为左右盒子留位置
5. 给父元素上清除浮动

DOM文档中结构如下：

<div class="parent">  
    <div class="main">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>  
    <div class="left"></div>  
    <div class="right"></div>  
</div> 

css样式：

.parent{width:100%; background-color:#ccc; margin:0 auto; overflow:hidden;} 
.left{width:200px; background-color:blue; height:300px; float:left; margin-left:-100%;}
.right{width:200px; background-color:green;height:300px; float:left; margin-left:-200px;}
.main{width:100%;background-color:red; color:#fff;height:300px; float:left;}
.main>div{margin:0 200px 0 200px;}

效果图：