程序员人生 网站导航

水平三栏式布局

栏目:互联网时间:2014-11-14 08:42:10

昨天被百度的大牛http://www.wfuyu.com/cxyms/到了这个问题,我竟回答的莫名其妙。想自杀,现在挥泪总结。

布局以下:

<div id="left">左侧栏</div> <div id="main">主内容</div> <div id="right">右侧栏</div>
第1种实现方式:

利用定位,left和right分别左定位和右定位,并设置宽度,比如220px,中间的main要设置margin,给left和right预留出位置220px。以下:

<style type="text/css"> html,body{ padding:0; margin:0; } #left, #right { position: absolute; top:0; width: 220px; height: 100px; } #left { left: 0; background: red; } #right { right:0; background: green; } #main { margin:0 230px; height: 100px; background: yellow; } </style>

第2种方式:用浮动实现

<!doctype html> <html lang="en"> <head> <meta charset="UTF⑻"> <title>Document</title> <!-- two --> <style type="text/css"> #left, #right { width: 220px; height: 200px; background: blue; } #right { float: right; } #left{ float: left; } #main { background: red; height: 200px; } </style> </head> <body> <!-- two --> <div id="left">左侧栏</div> <div id="right">右侧栏</div> <div id="main">主内容</div> </body> </html>
要注意left左浮动,right右浮动,main不浮动,但是,写的时候要先写right,后写main,由于right要右浮动。

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐