This is
some content
作者: 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的方法发展而来,用更简洁清楚的代码 实现了两个栏目的动态变化。下面是代码: 情缘.教程_网 [http://Www.XiuGoo.Com] 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; » /* 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: CENTER COLUMN CENTER LEFT RAIL RIGHT RAIL 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; } #rail{ background-color:#f00; width:150px; float:left; margin-right:-150px; } 3个栏目自适应布局 方法简单,不需要引用图片,没有BUG. HTML: Center Column Content Left Sidebar Right Sidebar 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; } 效果: 运行代码框 Center Column Content Left Sidebar Right Sidebar [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行] |
|小黑屋|最新主题|手机版|微赢网络技术论坛 ( 苏ICP备08020429号 )
GMT+8, 2024-9-29 11:24 , Processed in 0.270570 second(s), 12 queries , Gzip On, MemCache On.
Powered by Discuz! X3.5
© 2001-2023 Discuz! Team.