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

純CSS實現(xiàn)三列DIV等高布局方法揭秘

作者：admin
開發(fā) 前端
DIV等高布局問題相信大家都比較熟悉，解決方法也有不少，比如有的是通過背景圖片，實現(xiàn)假象的等高效果；還有的用js實現(xiàn)等等，這里向大家簡單介紹一下如何使用純CSS實現(xiàn)等高！

本文和大家重點討論一下如何使用純CSS實現(xiàn)三列DIV等高布局，現(xiàn)在我們來看看真正的CSS實現(xiàn)的等高布局，其方法主要是采用“隱藏容器溢出”、“正內(nèi)補丁”和“負外補丁”結(jié)合的方法實現(xiàn)的。

純CSS實現(xiàn)三列DIV等高布局

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

現(xiàn)在我們來看看真正的CSS實現(xiàn)的等高布局，其方法主要是采用“隱藏容器溢出”、“正內(nèi)補丁”和“負外補丁”結(jié)合的方法實現(xiàn)的。下面來看看實際的例子（三列等高），以下面的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> 
  37.  

 css代碼：

  1. <styletypestyletype="text/css"> 
  2.  
  3. body,p,ul{margin:0;padding:0;}  
  4. #wrap{overflow:hidden;width:1000px;margin:0auto;}  
  5. #left,#center,#right{margin-bottom:-10000px;padding-bottom:10000px;}  
  6. #left{float:left;width:250px;background:#00FFFF;}  
  7. #center{float:left;width:500px;background:#FF0000;}  
  8. #right{float:right;width:250px;background:#00FF00;}  
  9.  

#p#完整代碼如下：

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
  2.  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  4. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  5. <head> 
  6. <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> 
  7. <title>CSS等高布局</title> 
  8. <styletypestyletype="text/css"> 
  9. *{  
  10. margin:0;  
  11. padding:0;  
  12. }  
  13. #wrap{  
  14. overflow:hidden;  
  15. width:1000px;  
  16. margin:0auto;  
  17. }  
  18. #left,#center,#right{  
  19. margin-bottom:-10000px;  
  20. padding-bottom:10000px;  
  21. }  
  22. #left{  
  23. float:left;  
  24. width:250px;  
  25. background:#00FFFF;  
  26. }  
  27. #center{  
  28. float:left;  
  29. width:500px;  
  30. background:#FF0000;  
  31. }  
  32. #right{  
  33. float:right;  
  34. width:250px;  
  35. background:#00FF00;  
  36. }  
  37. </style> 
  38. </head> 
  39. <body> 
  40. <dividdivid="wrap"> 
  41. <dividdivid="left"> 
  42. <p>left</p> 
  43. <p>left</p> 
  44. <p>left</p> 
  45. <p>left</p> 
  46. <p>left</p> 
  47. </div> 
  48. <dividdivid="center"> 
  49. <p>center</p> 
  50. <p>center</p> 
  51. <p>center</p> 
  52. <p>center</p> 
  53. <p>center</p> 
  54. <p>center</p> 
  55. <p>center</p> 
  56. <p>center</p> 
  57. <p>center</p> 
  58. <p>center</p> 
  59. <p>center</p> 
  60. <p>center</p> 
  61. <p>center</p> 
  62. <p>center</p> 
  63. <p>center</p> 
  64. <p>center</p> 
  65. <p>center</p> 
  66. <p>center</p> 
  67. <p>center</p> 
  68. <p>center</p> 
  69. </div> 
  70. <dividdivid="right"> 
  71. <p>right</p> 
  72. <p>right</p> 
  73. <p>right</p> 
  74. </div> 
  75. </div> 
  76. </body> 
  77. </html> 
  78.  

 文章出處：標準之路(http://www.aa25.cn/css_example/858.shtml)

【編輯推薦】

  1. ASP.NET2.0中CSS失效解決方案
  2. CSS樣式表特點及嵌入網(wǎng)頁的四種途徑
  3. 三種方法實現(xiàn)CSS樣式表插入
  4. CSS外邊距設置屬性margin用法
  5. 探究CSS高級語法中選擇器分組和CSS繼承用法
責任編輯：佚名 來源： aa25.cn
CSSDIV
相關推薦

2011-06-03 15:32:25

CSS

2010-09-09 13:12:54

CSSfloatDIV

2010-09-02 13:03:38

CSS垂直居中

2010-08-16 15:46:16

DIV居中

2010-08-23 10:43:21

DIVCSS

2010-08-16 14:18:49

DIV+CSS

2010-09-14 17:07:26

DIV浮動定位CSS

2010-08-24 15:45:48

DIVCSSfloat

2010-09-02 14:17:56

CSS浮動

2010-09-10 13:58:38

DIV圖片居中

2010-08-24 11:00:55

DIV CSS

2009-07-15 18:23:36

跨流覽器多列布局

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-26 16:19:41

DIV圓角

2010-08-17 11:12:18

DIV CSS

2024-07-31 20:38:18

2010-08-31 15:07:45

CSS居中
點贊
收藏

51CTO技術棧公眾號