相关文章
Wizard网站制作软件 V3.1
Dreamweaver MX中文版建站攻略(一)
网站设计从基础学习网页CSS实用教程
网站设计参数设置
企通互联模板与风格模板的修改
网站制作Dreamweaver MX 2004 CSS背景属性
北京网站设计Flash制作中常见的加载外部文件时候碰到的问题
北京网站制作Flash MX 2004 查找替换功能（2）
网站制作制作简单实用的FLASH导航菜单（2）
北京网站制作CSS 标签属性/属性参考
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网站制作 >> 北京网站制作垂直三栏布局拥有相同高度的方法
北京网站制作垂直三栏布局拥有相同高度的方法
作者: 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的颜色保持一致。
流动布局
了解定宽布局之后，我尝试把这个方法用到动态布局中去。边栏仍然需要设置固定宽，很多浏览器不支持border:**%的属性。但是我门可以使中间栏目自适应。
CSS:北京网站建设
#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; www.qitongnet.com北京网页设计
}北京网页设计
#rail{网站设计
background-color:#f00;北京网站设计
width:150px;北京网站设计
float:left;北京网站制作
margin-right:-150px;网站建设
}
3个栏目自适应布局企通互联
方法简单，不需要引用图片，没有BUG.
HTML:
<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:
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;北京网站建设
}
效果:
代码框北京网页设计
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">网页设计
<html xmlns="http://www.w3.org/1999/xhtml">北京网站设计
<head>网页设计
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />北京网站设计
<title>css</title>网页设计
<style type="text/css">北京网站建设
<!--网站制作
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;北京网站建设
}
-->网站设计
</style>网页设计
</head>
<body>网站制作
<div id="container">北京网站设计
<div id="center">Center Column Content</div>企通互联
<div id="leftRail">Left<br /> Sidebar</div> 网站制作北京网页设计
<div id="rightRail">Right Sidebar</div>北京网站制作
</div>网站制作
</body>网站建设
</html>网站建设
上一篇：北京网站设计纯CSS代码实现翻页
下一篇：网站设计风讯团队的优势