CSS 三栏布局

三栏布局算是网页中最常见的布局之一了。尤其以内容为主的网站，比如CSDN、淘宝等。基本都是两侧固定宽度，中间自适应。

如果现在让你去实现这么一个三栏布局，你会怎么做呢？

利用绝对定位

我觉得这是比较古老和容易想到的方式。当初上大学刚接触 CSS 的时候，看到过一个网页，整站都是用绝对定位布局的。当时，觉得理所当然，布局就该这么做…

效果

代码

<div class="container">
    <div class="main">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore sapiente adipisci ullam quo dolor recusandae modi, iste quidem non reiciendis minus quia numquam aliquid. Vitae dolores dignissimos laboriosam nobis cupiditate!</div>
    <div class="left">左侧栏</div>
    <div class="right">右侧栏</div>
</div>

.left {
   
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    background-color: #f00;
}
.right {
   
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    background-color: #00f;
}
.main {
   
    position: absolute;
    top: