两列等高布局效果

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

<!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>CSS特效-两列等高布局效果</title>

<meta http-equiv="content-type" content="text/html;charset=gb2312">

<style type="text/css">

*{margin:0;padding:0}

html{overflow-y:scroll}

body{font-size:12px;background:#fff;color:#333}

ul,ol{list-style:none}

a{text-decoration:none;color:#f30}

img{border:none}

.clearfix{zoom:1}

.clearfix:after{content:"";display:block;height:0;line-height:0;font-size:0;visibility:hidden;clear:both}

.padding_con{height:150px;line-height:150px;text-align:center}

.hd_wrap{background:#333;border-bottom:3px solid #f30;zoom:1}

.header,.ct_wrap,.ft_wrap{width:950px;margin:0 auto;zoom:1}

.ct_wrap{background:#e0e0e0}

.header{height:45px;line-height:45px;color:#fff;border-bottom:3px solid #f30;margin-bottom:-3px;position:relative;background:#333}

.content{margin-left:150px;border-left:1px solid #333;background:#fff}

.main_col{float:left;width:100%;word-wrap:break-word}

.side_col{float:left;width:150px;margin-left:-950px;position:relative;word-wrap:break-word}

.ft_wrap{border-top:2px solid #333;zoom:1}

.footer{text-align:center;padding:10px 0}

</style>

</head>

<body>

<div class="hd_wrap">

    <div class="header">

        这里是我的网站的头部

    </div>

</div>

<div class="ct_wrap">

    <div class="content clearfix">

        <div class="main_col">

            <div class="padding_con">

                我也可以有背景色

            </div>

            <div class="padding_con">

                不管有几个我,右边看起来总是和左边一样高

            </div>

            <div class="padding_con">

                不管有几个我,右边看起来总是和左边一样高

            </div>

        </div>

        <div class="side_col">

            <div class="padding_con">

                我可以有背景色

            </div>

        </div>

    </div>

</div>

<div class="ft_wrap">

    <div class="footer">

        CopyRight &copy; 2011 by Cage

    </div>

</div>

</body>

</html>

 

你可能感兴趣的:(布局)