重新认识布局

两列布局：

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>

方法三，采用负margin值

.mainBox {        float: left;        width: 100%;        background-color: #FFFFFF;    }    /* 设置主要内容区域的外层div标签浮动，并将宽度设置为100% */    .mainBox .content {        margin: 0 210px 0 0;        background-color: #000000;    }    /* 设置主要内容区域的内层div标签外补丁保持宽度的默认值为auto，留出空白的位置 */    .sideBox {        float: left;        width: 200px;        margin-left: -200px;        background-color: #666666;    }    /* 将侧边栏设置左浮动，并设置宽度为200px，负边距为左边的-200px */<div class="container">        <div class="mainBox">            <div class="content">主要内容区域</div>        </div>        <div class="sideBox">侧边栏</div>    </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,中间设置margin:0 300px;

*{    padding:0px;    margin:0px;}#left,#right{    float:left;    width: 300px;    background-color: #0FC;}#right{    float:right;}#main{    margin:0 300px;    background-color:#999;}<div id="left">左边定宽</div><div id="right">右边定宽</div><div id="main">中间自适应</div>

方法三，负边距

    .container {        text-align: center;        color: #FFFFFF;    }    .mainBox {        float: left;        width: 100%;        background-color: #FFFFFF;    }    /* 设置主要内容区域的外层div标签浮动，并将宽度设置为100% */    .mainBox .content {        margin: 0 210px 0 310px; //  将 210px 和 310px 分别修改为 百分数，可以得到左侧定宽右侧及中间自适应、三列宽度自适应布局          background-color: #000000;    }    /* 设置主要内容区域的内层div标签外补丁保持宽度的默认值为auto，留出空白的位置给左右两列 */    .subMainBox {        float: left;        width: 300px;        margin-left: -100%;        background-color: #666666;    }    /* 将次要内容区域设置左浮动，并设置宽度为300px，负边距为左边的-100% */    .sideBox {        float: left;        width: 200px;        margin-left: -200px;        background-color: #666666;    }    /* 将侧边栏设置左浮动，并设置宽度为200px，负边距为左边的-200px */<div class="container">      <div class="mainBox">          <div class="content">主要内容区域</div>      </div>      <div class="subMainBox">次要内容区域</div>      <div class="sideBox">侧边栏</div>  </div>