CSS布局实例：头部和左右两列的常规代码

　　一款CSS布局的实例，等高的两个左右Div，很多时候，我们都需要两列等高，那怕其中一个是自适应高度呢。如例子所示，只要你按代码的方法去做了，不管有多少列，它都会以左边列为标准，自动适应高度，而且在兼容性方面，似乎做的也不错的。

　　示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <title>CSS特效-两列等高布局效果</title><br /> <meta http-equiv="content-type" content="text/html;charset=gb2312"><br /> <style type="text/css"><br /> *{margin:0;padding:0}<br /> html{overflow-y:scroll}<br /> body{font-size:12px;background:#fff;color:#333}<br /> ul,ol{list-style:none}<br /> a{text-decoration:none;color:#f30}<br /> img{border:none}<br /> .clearfix{zoom:1}<br /> .clearfix:after{content:"";display:block;height:0;line-height:0;font-size:0;visibility:hidden;clear:both}<br /> .padding_con{height:150px;line-height:150px;text-align:center}<br /> .hd_wrap{background:#333;border-bottom:3px solid #f30;zoom:1}<br /> .header,.ct_wrap,.ft_wrap{width:950px;margin:0 auto;zoom:1}<br /> .ct_wrap{background:#e0e0e0}<br /> .header{height:45px;line-height:45px;color:#fff;border-bottom:3px solid #f30;margin-bottom:-3px;position:relative;background:#333}<br /> .content{margin-left:150px;border-left:1px solid #333;background:#fff}<br /> .main_col{float:left;width:100%;word-wrap:break-word}<br /> .side_col{float:left;width:150px;margin-left:-950px;position:relative;word-wrap:break-word}<br /> .ft_wrap{border-top:2px solid #333;zoom:1}<br /> .footer{text-align:center;padding:10px 0}<br /> </style><br /> </head><br /> <body><br /> <div class="hd_wrap"><br /> <div class="header"><br /> 这里是我的网站的头部-烈火学院 Liehuo.Net<br /> </div><br /> </div><br /> <div class="ct_wrap"><br /> <div class="content clearfix"><br /> <div class="main_col"><br /> <div class="padding_con"><br /> 我也可以有背景色<br /> </div><br /> <div class="padding_con"><br /> 不管有几个我，右边看起来总是和左边一样高<br /> </div><br /> <div class="padding_con"><br /> 不管有几个我，右边看起来总是和左边一样高<br /> </div><br /> </div><br /> <div class="side_col"><br /> <div class="padding_con"><br /> 我可以有背景色<br /> </div><br /> </div><br /> </div><br /> </div><br /> <div class="ft_wrap"><br /> <div class="footer"><br /> CopyRight © 2011 by Cage<br /> </div><br /> </div><br /> </body><br /> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

热点

CSS布局实例：头部和左右两列的常规代码

由 dawei

您错过了

云直播技术：创新驱动，媒体行业的新飞跃

云直播技术：实现全球观众实时共享精彩瞬间

科技带领，云直播开启数字化生活新篇章

云直播技术，增强了线上活动的沉浸感与互动性

CSS布局实例：头部和左右两列的常规代码

由 dawei

相关文章

网站优化的整个完整步骤

基于PHP实现发微博动态代码实例

PHP文件操作简单介绍及函数汇总

您错过了

云直播技术：创新驱动，媒体行业的新飞跃

云直播技术：实现全球观众实时共享精彩瞬间

科技带领，云直播开启数字化生活新篇章

云直播技术，增强了线上活动的沉浸感与互动性