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 可以修改为其他值,但不能小于最高列的高度。

(本文来源于图老师网站,更多请访问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

延伸阅读
标签: Web开发
英文原文: http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css/ 中文译文: http://www.12sui.cn/blog/71.html 本人英语还没过四级,所以不能说是翻译把,只能说是按照自己的理解去叙述了一遍作者的意思,请各位多多指教。 译文内容 : 当你发觉你曾经以为的事实其实并不是那样,你会感觉很开心。 旧的方法 ...
标签: Web开发
用CSS 来布局很容易。如果你已经习惯用表格布局的话,起先会感觉比较困难。其实不难,只不过动机不同,并且在实践中更有意义。 你可以把这一页面的各个部分当作独立的版块来看待,无论你选择哪一块。你可以绝对或相对地用彼块取代此块。 定位 定位属性position用于定义一个元素是否absolute(绝对),relative(相对),static(静态),或...
标签: Web开发
从这件事证明了,我专业知识欠缺很多,还需要持续学习,静下心来吧。  新进的公司,接触新的东西,一切都让我倍感紧张。很久没有接触设计的东西了,突然上手就要做界面,心里还是很忐忑的。 贴一下Card的这个界面。    以前很少使用这类的总宽度自适应100%,两列布局,一列固定,一列自适应的,于是,有点头大。 搜索...
标签: Web开发
今天网页教学网将向大家讲解如何通过设计一个HTML/CSS的基本结构,来创造一个简单且常用的三列式固定页面布局。 我们的讲解会包含一些标准元素,如Logo、顶栏、导航栏、文本区域、用于文章分类的中列和用于插入Google Adsense 120X600广告的右侧列。所以您完全可以将这些代码快速拷贝并重新利用在自己的前端开发项目中。 HTML...
标签: Web开发
CSS布局中,一个重要的标签 DIV ,DIV是XHTML所支持的标签,DIV是一个容器,所有的XHTML标签对象都可以称为是一个容器.如 divcontent/div,h1titles/h1.... div代码的书写格式: div id="id 名称"[...]/div div class="class名称"[...]/div 注:同一个名称的id值,在当前的XHTML页面中,只日须使用一次,class名称可以重复使用...

经验教程

529

收藏

64
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部