zoukankan      html  css  js  c++  java
  • 多栏自适应布局

    一、两栏自适应,左右栏高度均200px, 左栏宽度自适应,右栏宽度200px

    <!--html代码-->
        <div class="right"></div>
        <div class="left"></div>
    * {
        margin: 0;
        padding: 0;
    
    }
    /*方案一*/
    .right {
        width: 200px;
        height: 200px;
        background-color: orange;
        float: right;
    }
    
    .left {
        height: 200px;
        background-color: lawngreen;
        margin-right: 200px;
    }
    /*方案二*/
    .right {
        width: 200px;
        height: 200px;
        background-color: orange;
        position: absolute;
        right: 0;
    }
    .left {
        height: 200px;
        background-color: lawngreen;
        margin-right: 200px;
    }

    二、三栏自适应布局,三栏高度均为200px,左右栏宽度均200px,中间一栏宽度自适应

     <!--html代码-->
        <div class="right"></div>
        <div class="left"></div>
        <div class="center"></div>
    .right, .left, .center {
        height: 200px;
    }
    .right, .left {
        width: 200px;
        position: absolute;
    }
    .right {
        right: 0;
        background-color: red;
    }
    .left {
        left: 0;
        background-color: green;
    }
    .center {
        background-color: #000;
        margin-left: 200px;
        margin-right: 200px;
    }

     三、bfc

    我们发现不管两栏布局还是三栏布局,对于宽度自适应的,我们都需要设置其margin来为宽度固定的box腾出位置,其实我们为宽度自适应的box,设置其overflow:hidden;触发bfc,改变其渲染方式,自然就会实现该效果,不在需要设置margin了。

    总结:

      1.html代码中自适应的div必须要放到最后写

      2.css代码中通过绝对定位来固定左右,剩下的位置为自适应的div;

      3.css代码中自适应的div要设置margin-left或margin-right来为固定的div空出位置

  • 相关阅读:
    WorkFlow
    自己写的一个多线程的consumer 和 producter 模式
    Visual Studio进行Web性能测试
    基元线程同步——内核模式构造
    系统架构师
    《构建高性能的web站点》读书笔记缓存
    python中的代码对象
    python web框架互相融合, Pyramid或取代Django
    海量数据处理专题
    Django框架学习Forms篇
  • 原文地址:https://www.cnblogs.com/Walker-lyl/p/5851204.html
Copyright © 2011-2022 走看看