怎么用CSS实现三列DIV等高布局-创新互联

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

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等高布局”有了更深的了解,不妨来实际操作一番吧!这里是创新互联建站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


分享文章:怎么用CSS实现三列DIV等高布局-创新互联
地址分享:http://azwzsj.com/article/ecegs.html