怎么用CSS实现三列DIV等高布局

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

创新互联是一家专业提供比如企业网站建设,专注与成都网站建设、成都网站制作、html5、小程序制作等业务。10年已为比如众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。

页面布局中经常遇到等高布局的情况，特别是在拥有背景颜色或背景图片的情况下，为了得到更好的视觉效果，就要实现DIV等高布局的效果。以最普遍的DIV三列布局来说，想实现三列等高布局，可以借助“overflow”、“padding”和“margin”三个属性来实现。代码如下：

HTML代码：

代码如下:

CSS代码：

代码如下:

#container{ overflow:hidden; width:1024px; margin:0 auto; }
#left, #center, #right { margin-bottom:-1000px; padding-bottom:1000px; }
#left { float:left; width:200px; background:#ccc; }
#center { float:left; width:400px; background:#bbeeeb; }
#right { float:right; width:200px; background:#555; }

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