css布局自适应高度方法
作者:Fayetian 来源:蓝色理想 发布时间:2007-05-11 17:03:00
作者: Alan Pearce
原文: Multi-Column Layouts Climb Out of the Box
地址: http://alistapart.com/articles/multicolumnlayouts
我们都了解拥有相同高度的布局是很麻烦的事,有很多相关资料提到过相关设计方法,所以在这我就不多做解释了。
最近在研究一个两个栏目的动态布局,每个栏目背景不同。我立刻想起了Dan Cederholm的Faux Columns,但我仍然需要一个动态布局的方法。我又看了完美布局的文章One True Layout,但是有很多bug,需要许多注释和程序。甚至考虑用JavaScrip来实现栏目始终保持同一高度,但是不行。绝望之余,几乎要用table布局,不,一定还有更好的方法。我想着一个问题“盒子外面是什么”,border!如果我可以使“sidebar”(或"rail")的div相对与“content”的div浮动,就可以实现多栏目相同高度。这个方法在很多地方介绍过:Douglas Livingstone的introduced ,Holly的extended John Bergevin的Position Is Everything。由one true layout的方法发展而来,用更简洁清楚的代码 实现了两个栏目的动态变化。下面是代码:
HTML:
<div id="container">
<div id="content">This is<br />some content</div>
<div id="rail">This is the rail</div>
</div>
CSS:
#container{
background-color:#0ff;
overflow:hidden;
width:750px;
}
#content{
background-color:#0ff;
width:600px;
border-right:150px solid #f00; »
/* The width and color of the rail */
margin-right:-150px; /* Hat tip to Ryan Brill */
float:left;
}
#rail{
background-color:#f00;
width:150px;
float:left;
}
给content div右加border,颜色宽度和rail一样,并相对与rail浮动。Margin:-150px;使rail div移到margin腾出的空间。如果content div变的比rail div 高,border随content div变高。视觉效果就是好像rail div也在变高。container的颜色设定和content div一样,如果rail div达到最高,container随之变高,这样就给我们content变高的效果。
看看效果。See it in action 。试改变字体大小,布局随之变化。
3个栏目:3个颜色
3个栏目的布局有点不同:直接给container div加border.
HTML:
<div id="container">
<div id="center">CENTER<br />COLUMN CENTER</div>
<div id="leftRail">LEFT RAIL</div>
<div id="rightRail">RIGHT RAIL</div>
</div>
CSS:
#container{
background-color:#0ff;
float:left;
width:500px;
border-left:150px solid #0f0; »
/* The width and color of the left rail */
border-right:200px solid #f00; »
/* The width and color of the right rail */
}
#leftRail{
float:left;
width:150px;
margin-left:-150px;
position:relative;
}
#center{
float:left;
width:500px;
margin-right:-500px;
}
#rightRail{
float:right;
width:200px;
margin-right:-200px;
position:relative;
}
中间的栏目margin-right:-150px 使左边的rail div始终沿中间栏目的左沿浮动,使旁边栏目在真确的位置显示。还有一些方法可以实现,但这个方法最好,更易实现流动布局(动态布局)。
因为边栏在container div外,浮动在border上。使用overflow: hidden使之隐藏:IE不支持,Firefox可以实现。边栏不需要设置颜色,它会于container div的颜色保持一致。
猜你喜欢
- 1. 确认已经安装了NT/2000和SQL Server的最新补丁程序,不用说大家应该已经安装好了,但是我觉得最好还是在这里提醒一
- <!--#include file="Include/Conn.asp"--><%If(Request
- 感谢大家对《 CSS Sprites 样式生成工具 》的喜爱,综合了1.x版本时大家所提出来的意见和建议,2.0版本主要的改变有下面几点:修
- 通常用户看到的页面的样式会受到三层控制,第一层是浏览器的默认样式,第二层是网页定义样式,第三层是用户自定义样式。和CSS一样,后面的优先级高
- 如果仅仅是定义表格的边框为1(border="1")和边框颜色值(如borderC
- 先前在DW教学-Dreamweaver量身打造Wordpress留言板(一) 教学文章中,已经成功的把前端留言机制与界面搞定了,虽然有了留言
- 这篇文章主要介绍了一种简单的MySQL数据库安装方法,详细内容请大家参考下文:虽然安装MySQL数据库的文章很多,但是我看后感觉对于初学者来
- 方法一1. 下载MySQL源码分发包,不用区分操作系统,我们需要的东西是一样的;2. 重命名自己的mysql的data目录下的mysql文件
- 在以前的日志中讲了怎么制作验证码,这篇就讲讲怎么给验证码加上起干扰效果的杂点。 其实很简单,首先做一个
- 一.权限表mysql数据库中的3个权限表:user 、db、 host权限表的存取过程是:1)先从user表中的host、 user、 pa
- 内容摘要:本文是一篇实例讲解的文章。作为一个普通的程序员,我深知,一个优秀的例程,对于正在学习编程的人是多么的有帮助。本文中使用的例程,是一
- web2.0的标志是Ajax的异步通信的发掘,给我们带来像google map,google suggest 这样令人惊叹的东西。而Ajax
- 请问如何在Oracle Setver端检测ODBC是否连接好了?首先,在SQLPLUS安装时勾选oracle open client ada
- 阅读上一章:Css布局Chapter 13 为文字指定样式我想以一章的篇幅来讨论用CSS设定文字样式的做法是个好点子.一般处理文字内容大概是
- 方法一【推荐】、用js插入flash,可防止虚线框激活建立一个ShowFlash.js文件,拷贝以下代码:function sho
- 在上一个文章里写了关于左(右)侧定宽右(左)侧自动缩放的两列浮动,这个文章就要说一下三列浮动的问题了。在之前说过,两列浮动是其他多列浮动的基
- 以下的文章主要是对MySQL limit查询优化的具体内容的介绍,我们大家都知道MySQL数据库的优化是相当重要的。其他最为常用也是最为需要
- 根据一般做法的话,导出部分字段时没有办法生成格式化XML文件,所以导入时就没有办法格式化导入数据。 我想到两点,1.手工修改格式化XML文件
- 2008北京奥运会块到了,下面的js代码将告诉你,离奥运会开幕还要多少天!让我们一起迎接这美好的时刻。相关文章推荐:各种北京2008奥运会倒
- 可以的,看看下面的代码和说明:<%sessionID = session.SessionIDtimeout&nbs