-
版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://forest.blogbus.com/logs/5581815.html
在iVane的Blog上看到一篇《两列一边宽度固定,另一边宽度自适应布局》，方法很不错，原文如下：
================================================
这个布局其实在实际应用中是经常用到的, 比如我这个blog的布局结构也是这样的, 利用这个布局还可以延伸到三列去, 甚至更多的变化.
布局的难点是如何使宽度固定的一边跟宽度自适应的另一边相排在一行呢? 答案是利用负边距, 自适应的一边先负外间距固定宽度边的宽度值, 然后内嵌的层再外间距相同的宽度值就可以了! 是不是觉得我说得有点乱? 没问题, 看代码就不会乱的了!
结构部分:
- <div id="main">
- <div id="left_part">
- <div id="in_left_part">
- 左边宽度为自适应, 利用负边距: <br />
- #left_part { margin-right: -350px;}<br />
- #in_left_part { margin-right: 350px;}
- </div>
- </div>
- <div id="right_part">
- 右边固定宽度, 宽度为350px;
- </div>
- </div>
样式部分:
- #main { margin: 30px 0 10px; text-align: center;}
- #left_part { float: left; margin-right: -350px; width: 100%;}
- #in_left_part { margin-right: 350px; height: 300px; padding-top: 150px;}
- #right_part { float: right; background:#292928; width: 350px; height: 300px; line-height: 300px;}
Demo 地址: http://blog.ikshow.cn/demo/2_col/
当然, 两边交换过来也是一样的, 呵呵~
Demo 地址: http://blog.ikshow.cn/demo/2_col/index_2.html
掌握了这个布局, 在面对很多页面时会很有用的~
=========================================================这样，对于布局的左右自适应和上下自适应就都有了比较好的解决方案了。:)
随机文章：
[转]XSLT之计数循环 2007-04-29[原]一行内文本溢出的处理 2007-04-26[分享]DIV内容垂直居中 2007-01-22改版心得 2006-03-17CSS布局自适应高度解决方法 2006-03-16
收藏到：Del.icio.us
引用地址：
评论