自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

分享用純CSS實(shí)現(xiàn)三列DIV等高布局的方法

作者：紫楓印象
開發(fā) 前端
我們經(jīng)常會看到用DIV等高布局的方法，但是用CSS等高布局則不常見，本文介紹了用純CSS實(shí)現(xiàn)等高布局，希望你會有收獲，一起來看。

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

現(xiàn)在我們來看看真正的 CSS 實(shí)現(xiàn)的等高布局，其方法主要是采用“隱藏容器溢出”、“正內(nèi)補(bǔ)丁”和“負(fù)外補(bǔ)丁”結(jié)合的方法實(shí)現(xiàn)的。 下面來看看實(shí)際的例子（三列等高），以下面的 XHTML 代碼為例：

html代碼：

 

  1. <div id="wrap"> 
  2. <div id="left"> 
  3. <p>left</p> 
  4. <p>left</p> 
  5. <p>left</p> 
  6. <p>left</p> 
  7. <p>left</p> 
  8. </div> 
  9. <div id="center"> 
  10. <p>center</p> 
  11. <p>center</p> 
  12. <p>center</p> 
  13. <p>center</p> 
  14. <p>center</p> 
  15. <p>center</p> 
  16. <p>center</p> 
  17. <p>center</p> 
  18. <p>center</p> 
  19. <p>center</p> 
  20. <p>center</p> 
  21. <p>center</p> 
  22. <p>center</p> 
  23. <p>center</p> 
  24. <p>center</p> 
  25. <p>center</p> 
  26. <p>center</p> 
  27. <p>center</p> 
  28. <p>center</p> 
  29. <p>center</p> 
  30. </div> 
  31. <div id="right"> 
  32. <p>right</p> 
  33. <p>right</p> 
  34. <p>right</p> 
  35. </div> 
  36. </div> 

css代碼：

 

  1. <style type="text/css">  
  2. body, p, ul { margin:0; padding:0; }  
  3. #wrap { overflow:hidden; width:1000px; margin:0 auto; }  
  4. #left, #center, #right { margin-bottom:-10000px; padding-bottom:10000px; }  
  5. #left { float:left; width:250px; background:#00FFFF; }  
  6. #center { float:left; width:500px; background:#FF0000; }  
  7. #right { float:right; width:250px; background:#00FF00; }  
  8.  
  9. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  10. <html xmlns="http://www.w3.org/1999/xhtml">  
  11. <head>  
  12. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  13. <title>CSS等高布局</title>  
  14. <style type="text/css">  
  15. *{  
  16. margin:0;  
  17. padding:0;  
  18. }  
  19. #wrap{  
  20. overflow:hidden;  
  21. width:1000px;  
  22. margin:0 auto;  
  23. }  
  24. #left,#center,#right{  
  25. margin-bottom:-10000px;  
  26. padding-bottom:10000px;  
  27. }  
  28. #left{  
  29. float:left;  
  30. width:250px;  
  31. background:#00FFFF;  
  32. }  
  33. #center{  
  34. float:left;  
  35. width:500px;  
  36. background:#FF0000;  
  37. }  
  38. #right{  
  39. float:right;  
  40. width:250px;  
  41. background:#00FF00;  
  42. } 

 

  1. </style> 
  2. </head> 
  3. <body> 
  4. <div id="wrap"> 
  5. <div id="left"> 
  6. <p>left</p> 
  7. <p>left</p> 
  8. <p>left</p> 
  9. <p>left</p> 
  10. <p>left</p> 
  11. </div> 
  12. <div id="center"> 
  13. <p>center</p> 
  14. <p>center</p> 
  15. <p>center</p> 
  16. <p>center</p> 
  17. <p>center</p> 
  18. <p>center</p> 
  19. <p>center</p> 
  20. <p>center</p> 
  21. <p>center</p> 
  22. <p>center</p> 
  23. <p>center</p> 
  24. <p>center</p> 
  25. <p>center</p> 
  26. <p>center</p> 
  27. <p>center</p> 
  28. <p>center</p> 
  29. <p>center</p> 
  30. <p>center</p> 
  31. <p>center</p> 
  32. <p>center</p> 
  33. </div> 
  34. <div id="right"> 
  35. <p>right</p> 
  36. <p>right</p> 
  37. <p>right</p> 
  38. </div> 
  39. </div> 
  40. </body> 
  41. </html> 

 

【編輯推薦】

  1. CSS自定義滾動條樣式
  2. Div+CSS常見錯誤總結(jié)
  3. div+css牛人也得看的15個css
  4. 非常優(yōu)秀的jQuery+CSS實(shí)現(xiàn)動態(tài)導(dǎo)航菜單教程
  5. 10 個漂亮的 CSS3 表單制作教程
責(zé)任編輯：于鐵 來源： 86ue.com
CSS
相關(guān)推薦

2010-09-06 15:46:08

CSSDIV

2010-09-09 13:12:54

CSSfloatDIV

2010-08-16 15:46:16

DIV居中

2010-09-14 17:07:26

DIV浮動定位CSS

2010-08-24 15:45:48

DIVCSSfloat

2009-07-15 18:23:36

跨流覽器多列布局

2010-09-02 14:30:57

DIV CSS

2010-08-24 11:00:55

DIV CSS

2010-08-26 16:19:41

DIV圓角

2024-07-31 20:38:18

2010-09-07 15:31:21

DIV CSS表單

2010-08-23 14:30:14

DIV+CSS

2010-09-10 14:06:47

DIV固定CSS

2010-09-10 08:54:52

DIV居中

2010-09-09 10:56:56

CSS

2010-08-25 12:47:40

DIVCSS

2010-08-17 11:12:18

DIV CSS

2010-08-23 13:59:32

DIV CSSmarginpadding

2010-08-24 09:05:20

CSS+DIV

2010-08-23 10:50:39

DIV+CSS
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號