div+css兩列布局與三列布局

一、兩列布局：

    1.左邊定寬，右邊自適應。

    方法一：采用position：absollute;並設置margin-left的值。

    例：

#left{
    position:absolute;
    width:300px;
    top:0px;
    left:0px;
    background:#F00;
}

#right{
    background:#0FC;
    margin-left:300px;
}

<div id="left">左邊定寬</div> <div id="right">右邊自適應</div>

        方法二：采用float;並設置overflow:auto;(隱藏溢出的內容)

        例：

#left {
    float: left;
    width: 300px;
    background-color: blue;
}
#right {
    overflow: auto;
    background-color: red;
}

<div id="left">左邊自適應</div>
<div id="right">右邊定寬</div>

二、三列布局：

     方法一：與兩列布局類似，左右兩邊設置position：absolute；和top:0;left:0;right:0;

                 中間設置margin-left和margin-right即可.

*{
    padding:0px;
    margin:0px;
}
#left,#right{
    position:absolute;
    width: 300px;
    top:0;
    background-color: #0FC;
}
#left{
    left:0;
}
#right{
    right:0;
}
#main{
    margin:0 300px;
    background-color:#999;
}

<div id="left">左邊定寬</div>
<div id="main">中間自適應</div>
<div id="right">右邊定寬</div>

 

     方法二：左右采用float,中間設置 overflow:auto;和margin:0 300px;

*{
    padding:0px;
    margin:0px;
}
#left,#right{
    float:left;
    width: 300px;
    background-color: #0FC;
}
#right{
    overflow:auto;
    float:right;
}
#main{
    margin:0 300px;
    background-color:#999;
}

<div id="left">左邊定寬</div>
<div id="right">右邊定寬</div>
<div id="main">中間自適應</div>

ps:歡迎指正優化