上一篇
下一篇
用CSS+DIV控制一行两列背景自适应
作者:andy 日期:2008-09-22
网页布局中常有的一种情况就是网页主体部分分成一行两列；而在很多种情况下，设计师们常把左右两列的背景色设计成不同色彩，以实现内容块的明显区分；但这样的设计给布局提出了一个看似简单，而实现非常难的问题；那就是左右两列怎么样实现背景高度自适应，及左边内容高于右边时，右边背景色也要和左边一样；右边内容高于左边时，左边背景色也要和右边一样；
为了实现这个效果，我在网上查过无数的文章，都没有很好的解决方案；多数人用很大的负数实现，也有人用javascript实现； 后来因为感觉这样实现不合理，所以我一直用表格来实现； 因为这样最简单； 但最近公司要求得用CSS+DIV来实现，不能用表格,我仔细想了想；想出了一个解决办法，给大家分享下；希望能对大家有帮助。
基本原则：
1、布局要合理，不能为了实现这样的效果而使html的代码变得臃肿；
2、CSS部分也要简单巧妙实现，不能为了这样的效果而写大量的代码；而主要的还是浏览器兼容方面要没有问题；
下面实现的代码：先看看效果
CSS代码：
程序代码
<style>
*{ padding:0; margin:0; font-size:12px; line-height:2.0; font-family:Verdana;}
#box{ background:#FFFF66;width:700px; padding-left:200px; float:left;}
#content{ background: #FF6600; float:left;}
#right{ width:695px; float:right;}
#left{ width:200px; margin-left:-200px; position:static; float:left;}
* html #left{position:fixed;}
</style>
Body部分代码：
程序代码
<body>
<div id="box">
<div id="content">
<div id="right">right <br />right</div>
<div id="left">left</div>
</div>
</div>
</body>
为了实现这个效果，我在网上查过无数的文章，都没有很好的解决方案；多数人用很大的负数实现，也有人用javascript实现； 后来因为感觉这样实现不合理，所以我一直用表格来实现； 因为这样最简单； 但最近公司要求得用CSS+DIV来实现，不能用表格,我仔细想了想；想出了一个解决办法，给大家分享下；希望能对大家有帮助。
基本原则：
1、布局要合理，不能为了实现这样的效果而使html的代码变得臃肿；
2、CSS部分也要简单巧妙实现，不能为了这样的效果而写大量的代码；而主要的还是浏览器兼容方面要没有问题；
下面实现的代码：先看看效果
CSS代码：
程序代码<style>
*{ padding:0; margin:0; font-size:12px; line-height:2.0; font-family:Verdana;}
#box{ background:#FFFF66;width:700px; padding-left:200px; float:left;}
#content{ background: #FF6600; float:left;}
#right{ width:695px; float:right;}
#left{ width:200px; margin-left:-200px; position:static; float:left;}
* html #left{position:fixed;}
</style>
Body部分代码：
程序代码<body>
<div id="box">
<div id="content">
<div id="right">right <br />right</div>
<div id="left">left</div>
</div>
</div>
</body>
文章来自: 
引用通告: 
Tags: 评论: 2 | 引用: 0 | 查看次数: -
发表评论
------------------------
我会帮你做链接的 ^_^