HTML+CSS的两栏、三栏布局以及垂直居中

1.两栏布局（左固定，右适应）

先写出初始样式和结构

<div class="container">
    <div class="left">Lorem ipsum dolor sit amet</div>
    <div class="right">Lorem ipsum dolor sit amet</div>
</div>
div {
    height: 200px;
    color: #fff;
}

1. float+margin实现方式

.left {
    float: left;
    width: 300px;
    background-color: #5616;
}
.right {
    width: 100%;
    margin-left: 300px;
    background-color: #438;    
}

2. position实现方式

.left {
    position: absolute;
    left:  0;
    width: 300px;
    background-color: #5616;
}
.right