背景:#EDF0F5 #FAFBE6 #FFF2E2 #FDE6E0 #F3FFE1 #DAFAF3 #EAEAEF 默认  
阅读新闻

DIV自适应页面宽度的实现

[日期:2007-04-13] 来源:网络  作者: [字体: ]
在firefox1.5,IE5.5,IE6.0,Oprea8.5下测试通过。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
div {
 height: 5em;
 line-height: 5em;
 text-align: center;
 margin: 0;
 padding: 0;
}
#d1, #d3, #d4, #d6 {
 float: left;
 background: #CCC;
}
#d1 {
 width: 20%;
}
#d2 {
 float: left;
 width: 30%;
 background: red;
}
#d3 {
 width: 50%;
}
#d4 {
 width: 200px;
 margin-right: -3px;
}
#d5 {
 background: red;
 line-height: 1.4em;
 text-align: left;
}
#d6 {
 width: 300px;
 float: right;
 margin-left: -3px;
}
div[id="d4"] {
 margin-right: 0 !important;
}
div[id="d6"] {
 margin-left: 0 !important;
}
-->
</style>
</head>

<body>
<h2>百分比宽度</h2>
<div id="d1">20%</div>
<div id="d2">30%</div>
<div id="d3">50%</div>
<h2>自适应</h2>
<div id="d4">left:200px</div>
<div id="d6">right:300px</div>
<div id="d5">自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应</div>
</body>
</html>

阅读:
录入:木鸟

推荐 】 【 打印
上一篇:CSS expression使用简介
下一篇:CSS hack:IE6,IE7,firefox显示不同效果
相关新闻      
本文评论       全部评论
  div[id="d4"] { margin-right: 0 !important; } 我想请问这么写的意思   (lizhaoling ,2007-08-03 )
  在IE6下测试还是有点问题,我重新改了一下,IE6和FF测试完全通过: http://bbs.51js.   (heii ,2007-04-28 )
发表评论


点评: 字数
姓名:

  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款