多列等高的CSS實(shí)現(xiàn)_層和布局特效

一個(gè)絕對(duì)值得收藏的多列高度自適應(yīng)代碼，完全用純CSS代碼實(shí)現(xiàn)，我們?cè)谟肅SS布局網(wǎng)頁(yè)的時(shí)候經(jīng)常會(huì)碰到這種問題，相信這個(gè)CSS代碼段定會(huì)幫上你的大忙，要仔細(xì)研究一下CSS代碼究竟有什么不同，多列自動(dòng)高度的代碼在哪里呢？

<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>你相信這個(gè)布局是用CSS寫的嗎？</p>
</div>
<div class="box mt5">
<p>歡迎測(cè)試！不要錢！</p>
</div>
<div class="box mt5">
<p>不差錢</p>
</div>
<div class="equal mt5 box">
<p>模板無(wú)憂（mb5u.com）提供各類網(wǎng)頁(yè)模板、視頻教程、JavaScript/CSS特效代碼以及常用軟件下載等，做有質(zhì)量的學(xué)習(xí)型源碼下載站。</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>是一個(gè)注重質(zhì)量的源碼下載站</p>
</div>
<div class="box mt5">
<p>純CSS實(shí)現(xiàn)的多列高度自適應(yīng)</p>
</div>
<div class="box mt5">
<p>模板無(wú)憂（<a href="/">mb5u.com</a>）提供各類網(wǎng)頁(yè)模板、視頻教程、JavaScript/CSS特效代碼以及常用軟件下載等，做有質(zhì)量的學(xué)習(xí)型源碼下載站。</p>
</div>
<div class="equal mt5 box">
<p>一個(gè)純CSS實(shí)現(xiàn)的多列等高布局！絕對(duì)值得收藏！</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>

所屬頻道：層和布局特效/更新時(shí)間：2012-12-04

[收藏][報(bào)錯(cuò)][返回列表]

相關(guān)層和布局特效：

層和布局特效Rss訂閱特效代碼搜索

層和布局特效推薦

猜你也喜歡看這些

相關(guān)鏈接：
復(fù)制本頁(yè)鏈接| 搜索多列等高的CSS實(shí)現(xiàn)
特效說(shuō)明：
層和布局模板-多列等高的CSS實(shí)現(xiàn)。

日韩天天综合网_野战两个奶头被亲到高潮_亚洲日韩欧美精品综合_av女人天堂污污污_视频一区**字幕无弹窗_国产亚洲欧美小视频_国内性爱精品在线免费视频_国产一级电影在线播放_日韩欧美内地福利_亚洲一二三不卡片区

多列等高的CSS實(shí)現(xiàn)_層和布局特效

層和布局特效Rss訂閱特效代碼搜索

層和布局特效推薦

猜你也喜歡看這些