垂直三栏布局拥有相同高度的方法(1)

• 作者: 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; &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>
  

• [1] [2] 下一页 
• 复制本页网址和标题，发送给你QQ/Msn的好友一起分享
  
  
• 垂直三栏布局拥有相同高度的方法(1) 相关文章：
• ·彻底弄懂CSS盒子模式（DIV布局快速入门）
• ·网页设计基础:Div+CSS布局入门教程
• ·CSS+DIV自适应高度布局
• ·用网页标准DIV+CSS创建固定宽度的网页布局
• ·DIV+CSS三行两列经典布局
• ·DIV+CSS布局入门实例教程
• ·DIV CSS网页布局导航菜单源代码(17)
• ·修改IE7 地址栏布局
• ·CSS网页布局DIV水平居中的各种方法
• ·DIV+CSS常用的网页布局代码
• 垂直三栏布局拥有相同高度的方法(1) 相关软件

上一篇:DBA:在生产环境中创建监控表DML的触发器

下一篇:直接解压提取PowerPoint2007中的图片

• 特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
• 者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
• 载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

精品推荐

热点TOP10

特别推荐