CSS实例:CSS实现的等高网页布局

南城旧事瑞恩

南城旧事瑞恩

2016-02-19 23:55

想不想get新技能酷炫一下,今天图老师小编就跟大家分享个简单的CSS实例:CSS实现的等高网页布局教程,一起来看看吧!超容易上手~

为了让网页更美观、协调,有的时候需要用到左右等到布局,传统的等高布局是用 javascript 实现的,现在来看看 silence 发明的真正的 CSS 实现的等高布局,其方法主要是采用隐藏容器溢出、正内补丁和负外补丁结合的方法实现的。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

下面来看看实际的例子(三列等高),以下面的 XHTML 代码为例:

div id="wrap"
div id="left"
pleft/p
pleft/p
pleft/p
pleft/p
pleft/p
/div
div id="center"
pcenter/p
(20个或更多个)
pcenter/p
/div
div id="right"
pright/p
pright/p
pright/p
/div
/div

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

从效果中可以看到,左右两列虽然内容少,但高度和内容最多的中间列等高。其核心代码(拿本例来说)是:

#wrap{
overflow:hidden;
}
#left,#center,#right{
margin-bottom:-10000px;
padding-bottom:10000px;
}

其中的 10000px 可以修改为其他值,但不能小于最高列的高度。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

经测试,此方法兼容 IE6/IE7/IE8 beta 2/FF/Opera/Chrome 。

方法很简单吧。从这里可以看出:看似简单的 CSS,其实并不简单。

======= 华丽的分割线(2009/02/18) ==================================

前两天做网页的时候运用这样方法发现一个问题:如果子列有边框 border 属性的话,下边框不会将不显示。因为他们下面还有很长一部分,都被隐藏了,看图理解:

半透明部分都被隐藏了,所以看不到下边框。

展开更多 50%)
分享

猜你喜欢

CSS实例:CSS实现的等高网页布局

Web开发
CSS实例:CSS实现的等高网页布局

CSS网页布局实例:三栏等高布局

Web开发
CSS网页布局实例:三栏等高布局

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS实例:三列等高布局

Web开发
CSS实例:三列等高布局

css布局实例:网页布局的方法

Web开发
css布局实例:网页布局的方法

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CSS教程:通过实例学习CSS布局网页

Web开发
CSS教程:通过实例学习CSS布局网页

实例详解CSS网页布局原理

Web开发
实例详解CSS网页布局原理

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

IE8的一些有趣的新功能

IE8的一些有趣的新功能

侠客密码查看器:快速找回密码 从此不再怕盗号者

侠客密码查看器:快速找回密码 从此不再怕盗号者
下拉加载更多内容 ↓