论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

实现三列布局相同高度的解决办法

文章类别:div+css布局 | 发表日期:2008-9-26 11:27:46

  作者: Alan Pearce 原文: Multi-Column Layouts Climb Out of the Box

  我们都了解拥有相同高度的布局是很麻烦的事,有很多相关资料提到过相关设计方法,所以在这我就不多做解释了。

  最近在研究一个两个栏目的动态布局,每个栏目背景不同。我马上想起了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 css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<div id=\"container\">
<div id=\"content\">This is<br />some content</div>
<div id=\"rail\">This is the rail</div>
</div>

CSS代码:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
#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 css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<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代码:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
#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的颜色保持一致。

  流动布局

  了解定宽布局之后,我尝试把这个方法用到动态布局中去。边栏仍然需要设置固定宽,很多浏览器不支持border:**%的属性。但是我门可以使中间栏目自适应。

CSS代码:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
#container{
background-color:#0ff;
overflow:hidden;
margin:0 100px;
padding-right:150px; /* The width of the rail */
}
* html #container{
height:1%; /* So IE plays nice */
}
#content{
background-color:#0ff;
width:100%;
border-right:150px solid #f00;
margin-right:-150px;
float:left;
}
#rail{
background-color:#f00;
width:150px;
float:left;
margin-right:-150px;
}

  3个栏目自适应布局 方法简单,不需要引用图片,没有BUG.

HTML代码:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<div id=\"container\">
<div id=\"center\">Center Column Content</div>
<div id=\"leftRail\">Left<br /> Sidebar</div>
<div id=\"rightRail\">Right Sidebar</div>
</div>

CSS代码:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
body{
margin:0 100px;
padding:0 200px 0 150px;
}
#container{
background-color:#0ff;
float:left;
width:100%;
border-left:150px solid #0f0;
border-right:200px solid #f00;
margin-left:-150px;
margin-right:-200px;
display:inline; /* So IE plays nice */
}
#leftRail{
float:left;
width:150px;
margin-left:-150px;
position:relative;
}
#center{
float:left;
width:100%;
margin-right:-100%;
}
#rightRail{
float:right;
width:200px;
margin-right:-200px;
position:relative;
}

运行效果:

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

  作者: Alan Pearce 原文: Multi-Column Layouts Climb Out of the Box
  地址:http://alistapart.com/articles/multicolumnlayouts
  
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058