DIV+CSS 网页布局之：三列布局
1、宽度自适应三列布局三列布局的原理和两列布局的原理是一样的，只不过多了一列，只需给宽度自适应两列布局中间再加一列，然后重新计算三列的宽度，就实现了宽度自适应的三列布局。 同样的道理，更多列的布局，其实和两列、三列的布局模式是一样的。 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> 2、左右两列固定宽度，中间内容宽度自适应要想实现左右两列固定宽度，中间宽度自适应的布局，那么使用浮动就做不到了，使用浮动之后页面就乱了，必须使用绝对定位来将三列固定在一行。 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>
|
- 上一篇：这 30 类 CSS 选择器，你必须理解！
- 下一篇：css练习