网页设计学习笔记

HTML,CSS,JavaScript

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: :: 管理 ::
< 2025年1月 >
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 1
2 3 4 5 6 7 8

用 CSS 可以比较简单地实现各种双栏布局,这里以左右双栏布局为例。双栏布局包括如下四种:(1)左右均为固定宽度;(2)左右均为比例宽度;(3)左边为固定宽度右边为浮动宽度;(4)右边为固定宽度左边为浮动宽度。

(1)左右均为固定宽度:这种情形比较简单。CSS内容如下:

#left {
  width: 300px;
}
#right {
  width: 700px;
  float: left;
}

(2)左右均为比例宽度:这种情形也简单,CSS内容如下:

#left {
    width: 30%;
}
#right {

    width: 70%;
    float: left;
}

注意左右的宽度比例之和最好不要恰好达到100%,否则会造成左右两栏在一些浏览器(比如 IE8)中无法并排而上下错开。

(3)左边为固定宽度右边占用剩余宽度:这种情形稍微困难,CSS内容如下:

#left {
    width:150px;
    position:absolute;
    left:0;
}
#right {
    position:absolute;
  left:160px;
}

其中使用了绝对定位的方式。如果不使用绝对定位也可以做到,不过需要多一层wrapper(参考[1])。

(4)右边为固定宽度左边占用剩余宽度:这种情形和前面情形类似,CSS内容如下:

#right {
    width:150px;
    position:absolute;
    right:0;
}
#left {
    position:absolute;
  right:160px;
}

参考资料:

[1] CSS Liquid Layout #2.1- (Fixed-Fluid)
[2] css - 2 columns div for ie8 and ie7 - Stack Overflow
[3] DIV布局之头尾固定中间自适应 - css探索之旅
[4] 姗姗来迟的div仿框架布局 - css探索之旅
[5] CSS森林(CSS Forest): [原]二栏宽高自适应布局

[YAML] Date: 2011-05-23 17:55:47, Updated: 2013-01-01 12:33:00

posted on   zoho  阅读(1032)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示