css布局之3栏布局

1.通过float的方式实现

html代码：

<div id="wrap">
    <div id="left"></div>
    <div id="right"></div>
    <div id="center"></div>
</div>

css代码：

#wrap{
    width:100%;
    height:100%;
}
#left{
    float:left;
    width:200px;
    height:100%;
    background-color:red;
}
#right{
    width:200px;
    float:right;
    height:100%;
    background-color:green;
}
#center{
    height:100%;
    margin-left:200px;
    margin-right:200px;
    background-color:yellow;
}

注意：通过浮动的方式实现，则应该先写left，在写right，最后写center

2.利用dispaly:table和display:table-cell实现

html代码：

<div id="wrap">
    <div id="left"></div>
    <div id="center"></div>
    <div id="right"></div>
</div>

css代码：

#wrap{
    width:100%;
    height:100%;
    display:table;
}
#left{
    width:200px;
    height:100%;
    display:table-cell;
    background-color:red;
}
#right{
    width:200px;
    height:100%;
    display:table-cell;
    background-color:green;
}
#center{
    display:table-cell;
    height:100%;
    background-color:yellow;
}

注意：通过table，table-cell的方式实现按照left-center-right的顺序写。

3.overflow:hidden的方式实现,及利用BFC，与方式1相似

html代码：

<div id="wrap">
    <div id="left"></div>
    <div id="right"></div>
    <div id="center"></div>
</div>

css代码：

#wrap{
    width:100%;
    height:100%;
}
#left{
    float:left;
    width:200px;
    height:100%;
    background-color:red;
}
#right{
    width:200px;
    float:right;
    height:100%;
    background-color:green;
}
#center{
    height:100%;
    overflow:hidden
    background-color:yellow;
}

注意：通过浮动的方式实现，则应该先写left，在写right，最后写center,center元素不需要margin

4.双飞翼布局

html代码：

<div id="wrap">
    <div id="middle">
        <div id="center"></div>
    </div>
    <div id="left"></div>
    <div id="right"></div>
</div>

css代码：

#wrap{
    width:100%;
    height:100%;
}
#middle{
    width:100%;
    height:100%;
    float:left;
}
#left{
    float:left;
    width:200px;
    height:100%;
    background-color:red;
    margin-left:-100%;
}
#right{
    float:left;
    width:200px;
    height:100%;
    background-color:green;
    margin-left:-200px;
}
#center{
    height:100%;
    background-color:yellow;
    margin-left:200px;
    margin-right:200px;
}

注意：通过浮动的方式实现，写的顺序：middle-left-right。

双飞翼布局就像小鸟一样，middle是整个，left是左翅膀，right是右翅膀，center是middle的内部就是小鸟的身体。