• 三列布局


    介绍几种左中右布局,左右定宽,中间自适应,扩展阅读可搜索关键字:圣杯布局,双飞翼布局

    注:建议所有布局都要有个包裹container并设置min-width(或width)等于设计稿所给尺寸,防止浏览器尺寸变化造成样式混乱。另,简易布局为笔者根据经验所写,如有不妥的地方欢迎指导修改。

    效果图:

    对比:

     
    优点
    缺点
    备注
    圣杯

    1.有效利用外层包裹结构

    2.中间部分优先渲染

    1.代码量最多

    2.因外包裹涉及到padding,所以要注意box-sizing:border-box时对整体宽度造成的印象

    虽代码量较多,但是较双飞翼结构简单。在实际开发当中考虑到子元素的绝对定位问题,通常会给外包裹添加position:relative。因此,这多余出的代码量也就不算什么了。

    双飞翼

    1.不依赖外层包裹

    2.中间部分优先渲染

    main需要再嵌套一层 左右结构比较清晰,较容易理解。但是由于中间多了一层子元素,使得结构复杂了一层。可视情况而定。
    简易

    不依赖外层包裹

    中间部分最后渲染 因为不需要优先渲染中间部分,所以限制就少,因此也是三者中代码量最少的。如无特别需要,平时开发利用此布局即可。

    代码:

    圣杯

    html:

    <div class="grail-container">
        <div class="grail-main"></div>
        <div class="grail-left"></div>
        <div class="grail-right"></div>
    </div>

    css:

    .grail-container { padding: 0 220px 0 230px; }
    .grail-main { float: left; 100%; }
    .grail-left { float: left; position: relative; 230px; margin-left: -100%; left: -230px; }
    .grail-right { float: left; position: relative; 220px; margin-left: -220px; right: -220px; }

    双飞翼

    html:

    <div class="wing-container">
        <div class="wing-main">
            <div class="wing-submain"></div>
        </div>
        <div class="wing-left"></div>
        <div class="wing-right"></div>
    </div>

    css:

    .wing-container {}
    .wing-main { float: left; 100%; }
    .wing-submain { margin: 0 220px 0 230px; }
    .wing-left { float: left; 230px; margin-left: -100%; }
    .wing-right { float: left; 220px; margin-left: -220px; }

    简易布局

    html:

    <div class="diy-container">
        <div class="diy-left"></div>
        <div class="diy-right"></div>
        <div class="diy-main"></div>
    </div>

    css:

    .diy-container{}
    .diy-left{float: left; 230px;}
    .diy-main{margin: 0 220px 0 230px;}
    .diy-right{float: right; 220px;}

  • 相关阅读:
    ios input readonly失效(点击的时候会有光标出现)/禁止输入法弹出问题
    sublime格式化
    菜单栏展开关闭效果(1)
    做数字判断显示相应的图标
    判断img的src为空/点击时候两张图片来回替换
    numpy
    pat甲级1085
    pat甲级1107
    2018.9.8pat秋季甲级考试
    pat甲级1044二分查找
  • 原文地址:https://www.cnblogs.com/coder-zyz/p/6749341.html
Copyright © 2020-2023  润新知