想不想get新技能酷炫一下,今天图老师小编就跟大家分享个简单的CSS实例:CSS实现的等高网页布局教程,一起来看看吧!超容易上手~
【 tulaoshi.com - Web开发 】
为了让网页更美观、协调,有的时候需要用到左右等到布局,传统的等高布局是用 javascript 实现的,现在来看看 silence 发明的真正的 CSS 实现的等高布局,其方法主要是采用隐藏容器溢出、正内补丁和负外补丁结合的方法实现的。
下面来看看实际的例子(三列等高),以下面的 XHTML 代码为例:
(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)div id="wrap"CSS 代码:
*{从效果中可以看到,左右两列虽然内容少,但高度和内容最多的中间列等高。其核心代码(拿本例来说)是:
#wrap{其中的 10000px 可以修改为其他值,但不能小于最高列的高度。
(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)经测试,此方法兼容 IE6/IE7/IE8 beta 2/FF/Opera/Chrome 。
方法很简单吧。从这里可以看出:看似简单的 CSS,其实并不简单。
======= 华丽的分割线(2009/02/18) ==================================
前两天做网页的时候运用这样方法发现一个问题:如果子列有边框 border 属性的话,下边框不会将不显示。因为他们下面还有很长一部分,都被隐藏了,看图理解:
半透明部分都被隐藏了,所以看不到下边框。
来源:http://www.tulaoshi.com/n/20160219/1630861.html
看过《CSS实例:CSS实现的等高网页布局》的人还看了以下文章 更多>>