CSS实现三列DIV等高布局的方法

本篇内容主要讲解“CSS实现三列DIV等高布局的方法”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“CSS实现三列DIV等高布局的方法”吧!

10年积累的网站制作、网站设计经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站策划后付款的网站建设流程，更有合作免费网站建设让你可以放心的选择与我们合作。

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

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

html代码：

  left
 left
 left
 left
 left

center

right

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; }

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; }

left

center

right

到此，相信大家对“CSS实现三列DIV等高布局的方法”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

重庆分公司，新征程启航

CSS实现三列DIV等高布局的方法

其他资讯