纯CSS实现三列DIV等高布局方法揭秘

2022-5-24

本文和大家重点讨论一下如何使用纯CSS实现三列DIV等高布局，现在我们来看看真正的CSS实现的等高布局，其方法主要是采用“隐藏容器溢出”、“正内补丁”和“负外补丁”结合的方法实现的。

纯CSS实现三列DIV等高布局

DIV等高布局，我想很多人都遇见过，我也看过不少的方法，有的是通过背景图片，实现假象的等高效果；还有的用js实现等等。这些都是方法，但是现在都不用以上的方法，来个真正的纯css实现等高！

现在我们来看看真正的CSS实现的等高布局，其方法主要是采用“隐藏容器溢出”、“正内补丁”和“负外补丁”结合的方法实现的。下面来看看实际的例子（三列等高），以下面的XHTML代码为例：

html代码：

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

 css代码：

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

#p#完整代码如下：

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

 文章出处：标准之路(http://www.aa25.cn/css_example/858.shtml)

【编辑推荐】

  1. ASP.NET2.0中CSS失效解决方案
  2. CSS样式表特点及嵌入网页的四种途径
  3. 三种方法实现CSS样式表插入
  4. CSS外边距设置属性margin用法
  5. 探究CSS高级语法中选择器分组和CSS继承用法
版权声明：
作者：后浪云
链接：https://www.idc.net/help/396862/
文章版权归作者所有，未经允许请勿转载。
THE END
Copyright © 2025 后浪云 网站地图