当前位置:编程学习 > html/css >>

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

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

  最近在研究一个两个栏目的动态布局,每个栏目背景不同。我立刻想起了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代码:
This is
some content
This is the rail

CSS代码:
 
#container{
background-color:#0ff;
overflow:hidden;
width:750px;
}
#content{
background-color:#0ff;
width:600px;
border-right:150px solid #f00;


补充:Css教程,高级应用 
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,