多列等高的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訂閱特效代碼搜索

層和布局特效推薦

猜你也喜歡看這些