多列等高的CSS实现_层和布局特效

一个绝对值得收藏的多列高度自适应代码，完全用纯CSS代码实现，我们在用CSS布局网页的时候经常会碰到这种问题，相信这个CSS代码段定会帮上你的大忙，要仔细研究一下CSS代码究竟有什么不同，多列自动高度的代码在哪里呢？

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<style type="text/css">
* {margin: 0; padding: 0;} 
body {margin:30px;font:14px/1.6em Verdana; } 
.main {overflow: hidden; width: 800px; margin: 0 auto;} 
.left {float: left; width: 250px; overflow: hidden; } 
.center {float:left; margin-left:5px; width:295px; } 
.right {float: right; width: 245px; overflow: hidden;} 
.bor_top { height:1px; background:skyblue; overflow:hidden; } 
.equal {padding-bottom: 32767px; margin-bottom: -32767px;} 
.box {background: skyblue; border: 1px #003399 solid; padding-left:10px; padding-right:10px;} 
.mt5 {margin-top: 5px;} </style>
</head>
</body>
<div class="main">
<div class="left equal">
<div class="box">
<p>你相信这个布局是用CSS写的吗？</p>
</div>
<div class="box mt5">
<p>欢迎测试！不要钱！</p>
</div>
<div class="box mt5">
<p>不差钱</p>
</div>
<div class="equal mt5 box">
<p>模板无忧（mb5u.com）提供各类网页模板、视频教程、JavaScript/CSS特效代码以及常用软件下载等，做有质量的学习型源码下载站。</p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</div>
<div class="center equal">
<div class="box">
<p>你是不是很吃惊呢？</p>
</div>
<div class="box mt5">
<p>居然是用CSS写的</p>
</div>
<div class="box mt5">
<p>哈哈，不信白不信~</p>
</div>
<div class="equal mt5 box">
<p>PHP</p>
<p>PHP</p>
<p>PHP</p>
<p>PHP</p>
<p>PHP</p>
<p>PHP</p>
<p>PHP</p>
<p>PHP</p>
<p>PHP</p>
<p>PHP</p>
</div>
</div>
<div class="equal right">
<div class="box">
<p><a href="/">mb5u.com</a>是一个注重质量的源码下载站</p>
</div>
<div class="box mt5">
<p>纯CSS实现的多列高度自适应</p>
</div>
<div class="box mt5">
<p>模板无忧（<a href="/">mb5u.com</a>）提供各类网页模板、视频教程、JavaScript/CSS特效代码以及常用软件下载等，做有质量的学习型源码下载站。</p>
</div>
<div class="equal mt5 box">
<p>一个纯CSS实现的多列等高布局！绝对值得收藏！</p>
</div>
</div>
</div>
<div class="main">
<div class="left bor_top"></div>
<div class="center bor_top"></div>
<div class="right bor_top"></div>
</div>
</body>
</html>

所属频道：层和布局特效/更新时间：2012-12-04

[收藏][报错][返回列表]

多列等高的CSS实现_层和布局特效

层和布局特效Rss订阅特效代码搜索

层和布局特效推荐

猜你也喜欢看这些