常用两栏布局总结

　　本文讲述常用的两栏布局：左边固定、右边自适应布局和右边固定、左边自适应布局和两栏等高布局，文中采用的是浮动布局的方式来实现两栏布局。

一.左边固定、右边自适应布局

　　左边固定、右边自适应布局的实现方式是让左边的盒子浮动，右边的盒子设置margin-left属性，代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body{
                padding:0;
                margin:0;
            }
            .container{
                height:200px;
            }
            .div1{
                width:200px;
                height:200px;
                background: red;
                float:left;        
            }
            .div2{
                margin-left: 200px;
                background: green;
                height:200px;
            }
        </style> 
    </head>
    <body>
        <div class="container">
            <div class="div1">
            </div>
            <div class="div2">
            </div>        
        </div>
    </body>
</html>

样式为

二.右边固定、左边自适应布局

　　右边固定、左边自适应布局的实现方式是让右边边的盒子浮动，左边的盒子设置margin-right属性，代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body{
                padding:0;
                margin:0;
            }
            .container{
                height:200px;
            }
            .div1{
                float:right;
                width:200px;
                height:200px;
                background: red;;        
            }
            .div2{
                margin-right: 200px;
                background: green;
                height:200px;
            }
        </style> 
    </head>
    <body>
        <div class="container">
            <div class="div1">
            </div>
            <div class="div2">
            </div>        
        </div>    
    </body>
</html>

样式为

三.两栏等高布局

　　实现两栏等高布局，可以采用padding补偿法。
　　要点1：父容器设置超出隐藏：overflow:hidden;
　　要点2：子容器设置padding-bottom:1000px;一个足够大的值。然后再设置一个margin-bottom的值和padding-bottom相等的负值，相抵消。
　　这种方法称之为padding补偿法。当其中一列的高度增高时，总的高度就会随之增高。因为背景是可以用在padding占用的空间里的，而且边框也是跟随padding变化的，所以就成功的完成了一个障眼法。
　　代码为：

<style>
#box{
width:900px;
font-size:28px;
line-height:300px;
text-align:center;
border:2px solid #000;
margin:10px auto;
background:#999;
overflow: hidden;
}
.left{
width:400px;
height:300px;
float:left;
background:#ccc;
margin-bottom:-1000px;
padding-bottom:1000px;
}
.right{
width:500px;
float:right;
background:#0F3;
margin-bottom:-1000px;
padding-bottom:1000px;
}
</style>
布局方面：
<div id="box">
<div class="left">
左边高度设为 height:500px;
</div>
<div class="right">
右边高度不用设置，自动实现等高
</div>
</div>

　　这样就可以实现两栏等高布局啦，效果如下: