简单的CSS网页布局--三列布局
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简单的CSS网页布局--三列布局相关的知识，希望对你有一定的参考价值。
三列布局其实不难，不过要用到position:absolute这个属性，因为这个属性是基于浏览器而言，左右部分各放在左右侧，空出中间一列来实现三列布局。
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>三列自适应</title> 6 <style type="text/css"> 7 body{ 8 margin: 0; /*清除浏览器默认样式*/ 9 padding: 0; 10 } 11 div{ 12 text-align: center; /*字体居中*/ 13 font-size: 30px; 14 font-weight: bold; 15 } 16 .left{ 17 width: 30%; /*设置左边宽度为30%*/ 18 background-color: #CCFF00; 19 height: 500px; 20 position: absolute; /*设置绝对位置*/ 21 left: 0; /*基于浏览器而进行位置的偏移*/ 22 top:0; 23 } 24 .middle{ 25 height: 500px; 26 background-color: #57A9D1; 27 margin: 0 30%; /*因为左右设置了30%的宽度，固要空出来*/ 28 } 29 .right{ 30 width: 30%; 31 height: 500px; 32 background-color: bisque; 33 position: absolute; 34 right: 0; 35 top: 0; 36 } 37 </style> 38 </head> 39 <body> 40 <div class="left">left</div> 41 <div class="middle">middle</div> 42 <div class="right">right</div> 43 </body> 44 </html>
(二)三列左右固定居中
这个跟上面的代码没怎么变化，只是在宽度那里改成了具体的px值;
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>三列左右固定居中</title> 6 <style type="text/css"> 7 body{ 8 margin: 0; /*清除浏览器默认样式*/ 9 padding: 0; 10 } 11 div{ 12 text-align: center; /*字体居中*/ 13 font-size: 30px; 14 font-weight: bold; 15 } 16 .left{ 17 width: 250px; /*设置左边宽度为250px*/ 18 background-color: #CCFF00; 19 height: 500px; 20 position: absolute; /*设置绝对位置*/ 21 left: 0; /*基于浏览器而进行位置的偏移*/ 22 top:0; 23 } 24 .middle{ 25 height: 500px; 26 background-color: #57A9D1; 27 margin: 0 250px; /*因为左右设置了250px的宽度，固要空出来*/ 28 } 29 .right{ 30 width: 250px; 31 height: 500px; 32 background-color: bisque; 33 position: absolute; 34 right: 0; 35 top: 0; 36 } 37 </style> 38 </head> 39 <body> 40 <div class="left">left</div> 41 <div class="middle">middle</div> 42 <div class="right">right</div> 43 </body> 44 </html>
以上是关于简单的CSS网页布局--三列布局的主要内容，如果未能解决你的问题，请参考以下文章