3.1.1 两列布局左边定宽，右边自适应.md

两列布局左边定宽，右边自适应。

• 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>

• 2 采用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>

• 3 左边和右边都用绝对定位

div.left{ position: absolute; left: 0;top: 0; width: 200px;height: 400px;background: red; word-break: break-all;}
div.right{position: absolute; left: 200px;top: 0; height: 400px;  background: blue; word-break: break-all;}