时间：2021-07-01 10:21:17 帮助过：50人阅读
三列布局的原理和两列布局的原理是一样的，只不过多了一列，只需给宽度自适应两列布局中间再加一列，然后重新计算三列的宽度，就实现了宽度自适应的三列布局。
同样的道理，更多列的布局，其实和两列、三列的布局模式是一样的。
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>三列布局title> 6 <style> 7 *{margin:0;padding:0;} 8 #herder{ 9 height:50px; 10 background:blue; 11 } 12 #main{ 13 width:100%; 14 overflow:hidden; 15 } 16 #main .main-left{ 17 width:25%; 18 height:800px; 19 background:red; 20 float:left; 21 } 22 #main .main-center{ 23 width:50%; 24 height:800px; 25 background:lightgreen; 26 float:left; 27 } 28 #main .main-right{ 29 width:25%; 30 height:800px; 31 background:pink; 32 float:right; 33 } 34 #footer{ 35 height:50px; 36 background:gray; 37 } 38 style> 39 head> 40 <body> 41 <div id="herder">页头div> 42 <div id="main"> 43 <div class="main-left">左列div> 44 <div class="main-center">中间div> 45 <div class="main-right">右列div> 46 div> 47 <div id="footer">页脚div> 48 body> 49 html>
要想实现左右两列固定宽度，中间宽度自适应的布局，那么使用浮动就做不到了，使用浮动之后页面就乱了，必须使用绝对定位来将三列固定在一行。
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>两边固定中间自适应布局title> 6 <style> 7 *{margin:0;padding:0;} 8 #herder{ 9 height:50px; 10 background:blue; 11 } 12 #main{ 13 width:100%; 14 position:relative; 15 } 16 #main .main-left{ 17 width:200px; 18 height:800px; 19 background:red; 20 position:absolute; 21 left:0; 22 top:0; 23 } 24 #main .main-center{ 25 height:800px; 26 background:lightgreen; 27 margin:0 310px 0 210px; 28 } 29 #main .main-right{ 30 width:300px; 31 height:800px; 32 background:pink; 33 position:absolute; 34 right:0; 35 top:0; 36 } 37 #footer{ 38 height:50px; 39 background:gray; 40 } 41 style> 42 head> 43 <body> 44 <div id="herder">页头div> 45 <div id="main"> 46 <div class="main-left">左列div> 47 <div class="main-center">设计网页的第一步就是设计版面布局，搭建网站结构，网页排版的合理性，在一定程度上也影响着网站整体的布局以及后期的优化。一个好的网站形象能更容易地吸引用户、留住用户。因此，网站首页第一屏的排版非常重要，很多时候能决定用户的去与留。div> 48 <div class="main-right">右列div> 49 div> 50 <div id="footer">页脚div> 51 body> 52 html>