【CSS】左侧定宽、右侧宽度自适应布局

    又是一道前端的面试题,请实现页面布局,包括页头、内容区域、页脚三部分,其中内容区域为左右分栏,左栏定宽200px、右栏自适应宽度。

    虽然是以前应用中碰到过的布局,但现场还是没写对,来重新做一下。



    提示:你可以先修改部分代码再运行。

    知其然知其所以然,简单分析一下。页头、内容区域、页脚三块划分没什么好说的,主要是左右分栏。为保证右侧div能撑满右侧,需要设width:100%;左右的div需要在同一行上,而右侧div已经撑满一行了,于是左侧div的做法就是从文档流中分离,设置position:absolute;此时左右两个div发生重叠,需要将右侧div内容宽度减少200px并相应右移,给左侧div留出空间,设定main的padding-left:200px; 发现左侧div的内容也向右偏移了200px,需要左移回去,所以设置left:0。这样布局就完成了。

    以上是中间区域双栏实现,现在改成左中右三栏的样式,代码如下:

    提示:你可以先修改部分代码再运行。



    本博客所有文章如无特别注明均为原创。
    复制或转载请以超链接形式注明转自枫芸志,原文地址《【CSS】左侧定宽、右侧宽度自适应布局
    标签:
    分享:

已经有5 条评论抢在你前面了~

  1. 沙发
    hhb 2014年3月23日 上午12:02

    三分栏中footer被覆盖了~

    [回复]

  2. 板凳
    咖啡小冰 2011年8月12日 下午4:18

    第一段中的main style我都写在middle中了,footer加了个float:left

    [回复]

    晴枫

    晴枫 回复:

    @咖啡小冰, 但你把#left的background删掉会发现,你修改后main的背景色也出现在了left上

    [回复]

  3. 地板
    凡尘飞扬 2011年6月15日 下午1:13

    貌似看见过

    [回复]

    晴枫

    晴枫 回复:

    @凡尘飞扬, 类似的估计不少,自己写写还是不一样

    [回复]

无觅相关文章插件,快速提升流量