css三欄布局

標籤：padding   html   add   布局   top   bsp   位置   部分   blog   

這裡自己總結2個比較容易的方法。

1、定位法

<div class="left">左</div><div class="main">中</div><div class="right">右</div>

*{        margin:0;        padding:0;        height:100%;    }    .left,.right{        position:absolute;        top:0;        background-color:green;        height:100%;    }    .left{        left:0;        width:100px;    }    .right{        right:0;        width:200px;    }    .main{        margin:0 200px 0 100px;        height:100%;        background-color:blue;    }

 2、浮動法

<div class="left">左</div><div class="right">右</div><div class="main">中</div> //注意中間部分的位置 如果把div放在中間 浮動上不去

 *{        margin:0;        padding:0;        height:100%;    }    .left{        background-color:green;        float:left;        width:100px;        height:100%;    }    .right{        background-color:green;        float:right;        width:200px;        height:100%;    }    .main{        margin:0 200px 0 100px;        height:100%;        background-color:blue;    }

 

css三欄布局