• 技术文章 >web前端 >html教程

    用 DIV + CSS 做液态布局(宽度自适应)_html/css_WEB-ITnose

    2016-06-24 12:30:30原创519

    长话短说,用 DIV + CSS 做液态布局(宽度自适应),具体用到“负值外补丁”的方法 (negative margins)。
    下面我们来做一个三栏液态布局(three-column liquid layout)

    首先 Body 和 外框 的代码:

    body{margin:0;padding:0px;text-align:center;}
    #wrap{margin:0 auto;text-align:left;}


    三栏的代码分别如下:

    /*左边栏,固定宽度*/
    .wrap_l{float:left;background:#FF0000;margin-right:-150px;width:150px;border:1px solid #333;}
    /*中间栏,自适应宽度*/
    .wrap_m{width:auto;background:#00FF00;margin:0 140px 0 150px;border:1px solid #000;}
    /*右边栏,固定宽度*/
    .wrap_r{float:right;background:#0000FF;margin-left:-140px;width:140px;border:1px solid #999;}


    到这里,框架已经完成,以下是完整代码:








    [示例] div + css 创建自适应宽度布局(液态布局)- Abloxo.com | Oeye.cn







    这是左边部分

    这是左边部分

    这是左边部分



    这是右边部分

    这是右边部分

    这是右边部分



    这是中间部分
    中间的左边

    中间的右边

    这是中间部分





    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:仍然是一个css和div的问题!_html/css_WEB-ITnose 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 各位高手,为什么我的网站打开的速度那么慢,到底是什么原因导致的?_html/css_WEB-ITnose• 框架跳转问题 求解_html/css_WEB-ITnose• Hexo建博小结• 为什么是这样的?_html/css_WEB-ITnose• 第 9 章 音频和视频_html/css_WEB-ITnose
    1/1

    PHP中文网