常見的兩列布局和三列布局

（1）兩列布局
方法一：採用position：absollute;並設置margin-left的值。
<div id="box">
    <div id="left">左邊定寬</div>
    <div id="right">右邊自適應</div>
  </div>
#box{position: relative;}
#left{position:absolute;top:0px; left:0px;
width:300px;background:#F00;}
#right{margin-left:300px;
 background:#0FC； }
方法二：採用float;並設置overflow:auto;(隱藏溢出的內容)
<div id="left2">左邊定寬</div>
<div id="right2">右邊自適應</div>
#left2 {
    float: left;width: 300px;
    background-color: blue；}
#right2 {
    overflow: auto;
    background-color: red；}
方法三：採用bootstrap佈局（需要引入.ccs和.js）
（2）三列布局
 方法一：左右兩邊設置position：absolute；和top:0;left:0;right:0;
                 中間設置margin即可

*{margin:0;padding:0;}

        #left,#right{

        position:absolute;top:0;

        background-color: red;

        width: 300px;}

        #left {

            left:0;

        }

        #right {

            right:0;    

        }

        #center{

        margin:0 300px;

        background-color: blue;}
<div id="left">左邊定寬</div>
<div id="center">中間自適應</div>
<div id="right">右邊定寬</div>
 方法二：左右採用float,中間設置 overflow:auto;和margin:0 300px;

    *{

            padding:0px;

            margin:0px;

        }

        #left,#right{

            overflow:auto;

            width: 300px;

            background-color: red;

        }

        #left{

            float:left;

        }

        #right{

            float:right;

        }

        #center{

            margin:0 300px;

            background-color:aquamarine;

        }
<div id="left">左邊定寬</div>
<div id="right">右邊定寬</div>
<div id="center">中間自適應</div>
方法三：採用bootstrap佈局（需要引入.ccs和.js）