一般在面试的过程中，都会让我们现场写三栏布局的代码，但有的时候会有一些不注意的细节性问题。
以下有两种解决方案，一种是兼容大部分浏览器，一种是只能部分浏览器才可以实现
第一种方案，最容易想到的是定位
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>三栏布局</title> 6 <style> 7 .container{ 8 width:100%; 9 height:100%; 10 position:relative; 11 } 12 .left{ 13 position:absolute; 14 top:0; 15 left:0; 16 width:100px; 17 background:#f0e; 18 } 19 .main{ 20 position:absolute; 21 left:100px; 22 right:100px; 23 width:auto; 24 top:0; 25 background:#ddd; 26 } 27 .right{ 28 position:absolute; 29 right:0; 30 top:0; 31 width:100px; 32 background:#111; 33 } 34 </style> 35 </head> 36 <body> 37 <div class="container"> 38 <div class="left">1233</div> 39 <div class="main">23456</div> 40 <div class="right">234567</div> 41 </div> 42 </body> 43 </html>
第二种解决方案相对于第一种解决方案，代码更精简，但只能在部分浏览器中实现。
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{ 8 padding:0; 9 margin:0; 10 } 11 .container{display:flex;} 12 .left,.right{width:100px;background:blue;} 13 .right{order:2;} 14 .main{ 15 order:1; 16 flex:1; 17 background:red; 18 } 19 </style> 20 </head> 21 <body> 22 <div class="container"> 23 <div class="left">1</div> 24 <div class="main">2</div> 25 <div class="right">3</div> 26 </div> 27 </body> 28 </html>
第三种解决方案，使用padding和margin-left和margin-right负值来实现的，这种方案需要注意的地方是，main部分不能放在中间，要放在最后，否则，不能实现三栏布局，前两个left和right可以随便排序。
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>三栏布局</title> 6 <style> 7 .container{ 8 min-height:600px; 9 background:#feff0a; 10 padding:0 300px; 11 } 12 .left{ 13 float:left; 14 width:300px; 15 min-height:400px; 16 margin-left:-300px; 17 background:#f0e; 18 } 19 .main{ 20 min-height:400px; 21 background:#ddd; 22 } 23 .right{ 24 min-height:400px; 25 margin-right:-300px; 26 width:300px; 27 float:right; 28 background:#111; 29 } 30 .clearfix{ 31 display:block; 32 content:""; 33 visibility:hidden; 34 clear:both; 35 height:0; 36 } 37 </style> 38 </head> 39 <body> 40 <div class="container"> 41 <div class="left"></div> 42 <div class="right"></div> 43 <div class="main"></div> 44 <div class="clearfix"></div> 45 </div> 46 </body> 47 </html>