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:歡迎指正最佳化

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