分析了兩列自適應布局的實現思路后，會覺得三列自適應布局的實現原理其實和他一模一樣，
不過是多了一個盒子而已。
<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; }
【 微信掃一掃 】
