divcss三列:div+css三行+三列实现代码来源: 发布时间:星期六, 2008年12月13日 浏览:11次 评论:0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>三行三列等高布局</title> <style> * html body { overflow: hidden; } * html #footer-wrapper { float: left; position: relative; width: 100%; padding-bottom: 10010px; margin-bottom: -10000px; background: #fff; /* Same as body background */ } * html #left { left: 150px; /* RC width */ } body { min-width: 630px; /* 2x (LC fullwidth + CC padding) + RC fullwidth */ } #container { padding-left: 200px; /* LC fullwidth */ padding-right: 190px; /* RC fullwidth + CC padding */ overflow: hidden; } #container .column { float: left; position: relative; } #center { background-color: red; padding: 10px 20px; /* CC padding */ width: 100%; } #left { background-color: blue; width: 180px; /* LC fullwidth - padding */ padding: 0 10px; /* LC padding */ right: 240px; /* LC fullwidth + CC padding */ margin-left: -98%; } #right { background-color:green; width: 130px; /* RC width */ padding: 0 10px; /* RC padding */ margin-right: -190px; /* RC fullwidth + CC padding */ } #footer { position: relative; background-color:orange; clear: both; } #header { background-color:orange; } </style> </head> <body> <div id="header">aa</div> <div id="container"> <div id="center"  ="column">bb</div> <div id="left" ="column">cc</div> <div id="right" ="column">dd</div> </div> <div id="footer-wrapper"> <div id="footer">ee</div> </div> </body> </html> 0
相关文章
读者评论
发表评论 |
 |
专注于互联网--专注于架构 |
最新标签 网站地图 文章索引 Rss订阅 |
