一个不规则的布局 [续]

[ 2007年 星期三 30May 5:28 pm | 作者: iVane Hwang | 标签: ]

继续上一篇，当时那个布局是采用浮动的方式来制作的，但是有个缺点就是高度不能够自适应，后来 aoao 在留言里提示是这样说的：

如果你先把它理解成两栏，然后使用负值偏移，就可以做到这样的布局。
因为是两栏浮动，对于高度自适应，就简单多了。

是的，接下来的这个布局结构就是按照aoao的方法来做～

先分成两列，然后利用负边值来搞定那个最难的问题，

结构代码：

  1. <div id="main">
  2. <div class="header"></div>
  3. <div class="left-part">
  4. <div class="left-1">1</div>
  5. <div class="right-1">2</div>
  6. <div class="right-2">3</div>
  7. <div class="mid-1">5</div>
  8. <div class="left-2">6</div>
  9. <div class="right-3">7</div>
  10. <div class="clear"></div>
  11. </div>
  12. <div class="right-part">
  13. <div class="right-part-1">4</div>
  14. </div>
  15. <div class="footer"></div>
  16. </div>

CSS样式：

  1. #main { margin: 30px auto; width: 760px;}
  2.   .header { margin-bottom: 10px; width: 760px; height: 28px; border: 1px #6c6c6c solid; background: #292928;}
  3.   .left-part { float: left; width: 490px; margin-bottom: 10px;}
  4.     .left-1 { float: left; width: 180px; height: 300px; border: 1px #6c6c6c solid; background: #292928; margin-bottom: 10px;}
  5. .right-1 { float: right; width: 570px; border: 1px #6c6c6c solid; background: #292928; height: 100px; position: relative; z-index: 1000; margin-right: -272px;}
  6. .right-2 { float: right; margin: 10px -2px 10px 0; width: 300px; height: 188px; border: 1px #6c6c6c solid; background: #292928; position: relative; z-index: 1000;}
  7. .mid-1 { clear: both; width: 490px; height: 60px; border: 1px #6c6c6c solid; background: #292928; margin-bottom: 10px;}
  8.     .left-2 { float: left; width: 180px; height: 148px; border: 1px #6c6c6c solid; background: #292928;}
  9. .right-3 { float: right; width: 300px; height: 148px; border: 1px #6c6c6c solid; background: #292928; margin-right: -2px; position: relative; z-index: 1000;}
  10.   .right-part { float: right; width: 260px; padding-top: 112px; margin-bottom: 10px;}
  11.     .right-part-1 { width: 100%; height: 420px; border: 1px #6c6c6c solid; background: #292928; margin-right: -2px; position: relative; z-index: 1000;}
  12.   .footer { clear: both; width: 760px; height: 28px; border: 1px #6c6c6c solid; background: #292928; margin-bottom: 30px;}

Demo 地址：http://blog.ikshow.cn/demo/layout_position_2/

这样的一个结构就能实现高度自适应了，但是回过头想一下，这种布局有必要高度自适应吗？如果是宽度自适应的话那更加的难，现实中使用应该还是定好了高度，就像第一个方法一样！不过这样做也添加了多几个乐趣～呵呵！xhtml+css真的太好玩了！

订阅：RSS 2.0    |   引用：http://ikshow.com/archives/222/trackback   |   分类：06. 标 准 ※ 重 构

随便来一篇，总有您喜欢的:)

目前已经有 2条 评论了, 您也发表一条评论吧 XDD

  • 1楼的 aoao 说：

    高度自适应是一种无聊的练习。
    真的想练技术就练弹性布局吧。那才好玩。。

    [06月 1st, 2007 at 12:58 pm]  

  • 2楼的 iVane 说：

    嘿嘿！以前有个项目是需要到弹性布局的，那次做一个页面是需要好多时间的，T_T

    [06月 1st, 2007 at 6:36 pm]  

发表评论：

« 一个不规则的布局

终于来了，Microsoft Expression Web »