三列自适应布局

分析了两列自适应布局的实现思路后，会觉得三列自适应布局的实现原理其实和他一模一样，
不过是多了一个盒子而已。

第一类，浮动在前：

<div class="left"></div> 
<div class="right"></div> 
<div class="main"></div>

方法一：float+margin

.main { 
    margin-left: 150px; 
    margin-right: 100px; 
} 
.left { 
    float: left; 
    width: 150px; 
} 
.right { 
    float: right; 
    width: 100px; 
}

方法二：float+BFC

.main { 
    overflow: hidden; 
} 
.left { 
    float: left; 
    width: 150px; 
} 
.right { 
    float: right; 
    width: 100px; 
}

 

第二类，主要内容在前：

方法三：float+负边距+relative

<div class="main"></div> 
<div class="left"></div> 
<div class="right"></div>

这里和两列布局有些不同，在两列布局中，.main只需要右移给.left空出位置就可以了，
所以给他一个margin-left就能解决。而在三列布局中，他不仅需要给.left腾出空间，还要给.
right腾出空间，此时margin已经无能为力了，所以需要他们三个外面的盒子来做这件事情：

body { 
    padding-left: 150px; 
    padding-right: 100px; 
}

这样子就会产生一个问题，给body添加了padding之后，.main的宽度就减小了，这就意味着
.left的margin-left值也会减小，于是，当.main的宽度减小到小于.left的宽度时，
.left的负边距已经不能为他创造足够的空间到上面一行了，他就会被挤下去。所以，
为了避免这个问题，需要给包裹盒子设置一个最小宽度，当屏幕宽度小于这个值时，他将不再收缩。

.main { 
    float: left; 
    width: 100%; 
} 
.left { 
    float: left; 
    position: relative; 
    left: -150px; 
    margin-left: -100%; 
    width: 150px; 
} 
.right { 
    float: left; 
    position: relative; 
    right: -100px; 
    margin-left: -100px; 
    width: 100px; 
} 
body { min-width: 150px; 
    padding-left: 150px; 
    padding-right: 100px; 
}

 

方法四：float+负边距+新盒子

<div class="main"> 
    <div class="main-content"></div> 
</div> 
<div class="left"></div> 
<div class="right"></div>

这时的问题是，当屏幕宽度小于.left和.right宽度之和时，.main-content即中间那列
已经完全被挤没了，所以，同样需要给他们外面的盒子设置一个最小宽度：

.main { 
    float: left; 
    width: 100%; 
} 
.left { 
    margin-left: -100%; 
    float: left; 
    width: 150px; 
} 
.right { 
    margin-left: -100px; 
    float: left; 
    width: 100px; 
} 
.main-content { 
    margin-left: 150px; 
    margin-right: 100px; 
} 
body { 
    min-width:500px; 
}

 

方法五：flexbox

<div class="container"> 
    <div class="main"></div> 
    <div class="left"></div> 
    <div class="right"></div> 
</div>

.container { 
    min-width: 500px; 
    display: flex; 
} 
.main { 
    margin: 0 10px; 
    order: 1; 
    flex: 1; 
} 
.left { 
    width: 150px; 
} 
.right { 
    order:2; 
    width: 100px; 
}