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

2016-02-19 23:55 12 1 收藏

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

【 tulaoshi.com - Web开发】

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

下面来看看实际的例子（三列等高），以下面的 XHTML 代码为例：

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）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 可以修改为其他值，但不能小于最高列的高度。

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

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

======= 华丽的分割线（2009/02/18） ==================================

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

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

来源:http://www.tulaoshi.com/n/20160219/1630861.html

上一篇： IE8的一些有趣的新功能
下一篇：侠客密码查看器：快速找回密码从此不再怕盗号者

看过《CSS实例：CSS实现的等高网页布局》的人还看了以下文章更多>>

网页布局 CSS简单实现垂直居中

标签： Web开发

英文原文： http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css/ 中文译文： http://www.12sui.cn/blog/71.html 本人英语还没过四级，所以不能说是翻译把，只能说是按照自己的理解去叙述了一遍作者的意思，请各位多多指教。译文内容：当你发觉你曾经以为的事实其实并不是那样，你会感觉很开心。旧的方法 ...

css教程：网页布局

标签： Web开发

用CSS 来布局很容易。如果你已经习惯用表格布局的话，起先会感觉比较困难。其实不难，只不过动机不同，并且在实践中更有意义。你可以把这一页面的各个部分当作独立的版块来看待，无论你选择哪一块。你可以绝对或相对地用彼块取代此块。定位定位属性position用于定义一个元素是否absolute（绝对），relative（相对），static（静态），或...

CSS教程实例：关于网页的两列布局

标签： Web开发

从这件事证明了，我专业知识欠缺很多，还需要持续学习，静下心来吧。新进的公司，接触新的东西，一切都让我倍感紧张。很久没有接触设计的东西了，突然上手就要做界面，心里还是很忐忑的。贴一下Card的这个界面。以前很少使用这类的总宽度自适应100%，两列布局，一列固定，一列自适应的，于是，有点头大。搜索...

CSS教程：三列固定网页布局实例

标签： Web开发

今天网页教学网将向大家讲解如何通过设计一个HTML/CSS的基本结构，来创造一个简单且常用的三列式固定页面布局。我们的讲解会包含一些标准元素，如Logo、顶栏、导航栏、文本区域、用于文章分类的中列和用于插入Google Adsense 120X600广告的右侧列。所以您完全可以将这些代码快速拷贝并重新利用在自己的前端开发项目中。 HTML...

学习CSS布局网页的一些实例

标签： Web开发

CSS布局中,一个重要的标签 DIV ,DIV是XHTML所支持的标签,DIV是一个容器,所有的XHTML标签对象都可以称为是一个容器.如 divcontent/div,h1titles/h1.... div代码的书写格式: div id="id 名称"[...]/div div class="class名称"[...]/div 注:同一个名称的id值,在当前的XHTML页面中,只日须使用一次,class名称可以重复使用...

查看更多精彩>>