加载中…
个人资料
我的sw
我的sw
  • 博客等级:
  • 博客积分:0
  • 博客访问:484
  • 关注人气:0
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
相关博文
推荐博文
谁看过这篇博文
加载中…
正文 字体大小:

div+css实现三行三列

(2009-10-28 18:06:38)
标签:

divcss

杂谈

以下是引用片段的内容:

<!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;  

html #left 

left: 150px;  

body 

min-width: 630px;  

#container 

padding-left: 200px;  
padding-right: 190px;  
overflow: hidden; 

#container .column 

float: left; 
position: relative; 

#center 

background-color: red; 
padding: 10px 20px;  
width: 100%; 

#left 

background-color: blue; 
width: 180px;  
padding: 10px;  
right: 240px;  
margin-left: -98%; 

#right 

background-color:green; 
width: 130px;  
padding: 10px;  
margin-right: -190px;  

#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" class="column">bb</div> 
<div id="left" class="column">cc</div> 
<div id="right" class="column">dd</div> 
</div> 
<div id="footer-wrapper"> 
<div id="footer">ee</div> 
</div> 
</body> 
</html>

0

阅读 评论 收藏 转载 喜欢 打印举报/Report
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 电话:4000520066 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有