分享用純CSS實現三列DIV等高布局的方法

作者：紫楓印象 2011-06-03 15:32:25

我們經常會看到用DIV等高布局的方法，但是用CSS等高布局則不常見，本文介紹了用純CSS實現等高布局，希望你會有收獲，一起來看。

DIV等高布局，我想很多人都遇見過，我也看過不少的方法，有的是通過背景圖片，實現假象的等高效果；還有的用js實現等等。這些都是方法，但是現在都不用以上的方法，來個真正的純css實現等高！

現在我們來看看真正的 CSS 實現的等高布局，其方法主要是采用“隱藏容器溢出”、“正內補丁”和“負外補丁”結合的方法實現的。下面來看看實際的例子（三列等高），以下面的 XHTML 代碼為例：

html代碼：

<div id="wrap"> 
<div id="left"> 
<p>left</p> 
<p>left</p> 
<p>left</p> 
<p>left</p> 
<p>left</p> 
</div> 
<div id="center"> 
<p>center</p> 
<p>center</p> 
<p>center</p> 
<p>center</p> 
<p>center</p> 
<p>center</p> 
<p>center</p> 
<p>center</p> 
<p>center</p> 
<p>center</p> 
<p>center</p> 
<p>center</p> 
<p>center</p> 
<p>center</p> 
<p>center</p> 
<p>center</p> 
<p>center</p> 
<p>center</p> 
<p>center</p> 
<p>center</p> 
</div> 
<div id="right"> 
<p>right</p> 
<p>right</p> 
<p>right</p> 
</div> 
</div>

css代碼：

<style type="text/css">  
body, p, ul { margin:0; padding:0; }  
#wrap { overflow:hidden; width:1000px; margin:0 auto; }  
#left, #center, #right { margin-bottom:-10000px; padding-bottom:10000px; }  
#left { float:left; width:250px; background:#00FFFF; }  
#center { float:left; width:500px; background:#FF0000; }  
#right { float:right; width:250px; background:#00FF00; }  
 
<!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>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>CSS等高布局</title>  
<style type="text/css">  
*{  
margin:0;  
padding:0;  
}  
#wrap{  
overflow:hidden;  
width:1000px;  
margin:0 auto;  
}  
#left,#center,#right{  
margin-bottom:-10000px;  
padding-bottom:10000px;  
}  
#left{  
float:left;  
width:250px;  
background:#00FFFF;  
}  
#center{  
float:left;  
width:500px;  
background:#FF0000;  
}  
#right{  
float:right;  
width:250px;  
background:#00FF00;  
}

</style> 
</head> 
<body> 
<div id="wrap"> 
<div id="left"> 
<p>left</p> 
<p>left</p> 
<p>left</p> 
<p>left</p> 
<p>left</p> 
</div> 
<div id="center"> 
<p>center</p> 
<p>center</p> 
<p>center</p> 
<p>center</p> 
<p>center</p> 
<p>center</p> 
<p>center</p> 
<p>center</p> 
<p>center</p> 
<p>center</p> 
<p>center</p> 
<p>center</p> 
<p>center</p> 
<p>center</p> 
<p>center</p> 
<p>center</p> 
<p>center</p> 
<p>center</p> 
<p>center</p> 
<p>center</p> 
</div> 
<div id="right"> 
<p>right</p> 
<p>right</p> 
<p>right</p> 
</div> 
</div> 
</body> 
</html>

【編輯推薦】

CSS自定義滾動條樣式
Div+CSS常見錯誤總結
div+css牛人也得看的15個css
非常優秀的jQuery+CSS實現動態導航菜單教程
10 個漂亮的 CSS3 表單制作教程

責任編輯：于鐵來源： 86ue.com

CSS