手机端页面:m.a55.com.cn
新辉网
当前位置: 主页 > 网页基础 > HTML >

DIV垂直三栏相同高度的布局的方法

2016-02-13 互联网 a55 点击: 评论
最近在研究一个两个栏目的动态布局,每个栏目背景不同。我立刻想起了Dan Cederholm的Faux Columns,但我仍然需要一个动态布局的方法。我又看了完美布局的文章One True Layout,但是有很多bug,需要许多注释和程序。甚至考虑用JavaScrip来实现栏目始终保持同一高度,但是

作者: 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 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; &raquo;
  /* 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; &raquo;
  /* The width and color of the left rail */
  border-right:200px solid #f00; &raquo;
  /* 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的颜色保持一致。

 

 

 

文章转载请注明来源。新辉网主页 > 网页基础 > HTML >
标题:DIV垂直三栏相同高度的布局的方法
地址:http://www.a55.com.cn/a/22775.html

关键词:垂直三栏,三栏布局,相同高度

织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
相关阅读 DIV垂直三栏相同高度的布局的方法
------分隔线----------------------------
发表评论 标题:DIV垂直三栏相同高度的布局的方法
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
验证码: 点击我更换图片
推荐内容
<Back 返回首页 ▲Top