zoukankan      html  css  js  c++  java
  • CSS-三栏自适应高度

    通过负边距(padding/-marging)实现三栏自适应高度;

    解决思想:左边栏向左浮动,右边栏向右浮动,中间栏放到最后,不需要浮动;

    <div>
        <div class="leftSide">左边栏</div>
        <div class="rightSide">右边栏</div>
        <div class="middAuto">中间自适应部分</div>
    </div>

    高宽固定:

    .leftSide{
        float: left;
        display: inline;
        width: 250px;
        background-color: #fff;
        border: 1px solid #c8c8c8;
        padding-bottom: 20000px;
        margin-bottom: -20000px;
    }

    宽度固定,高度自适应;

    .rightSide{
        float: right;
        display: inline;
        width: 260px;
        background-color: #fff;
        padding-bottom: 20000px;
        margin-bottom: -20000px;
    }

    中间自适应宽度/高度;

    .middAuto{    
        background-color: #c5c5c5;
        padding-bottom: 20000px;
        margin-bottom: -20000px;
    }
    高否?富否?帅否? 否? 滚去学习!
  • 相关阅读:
    SPA项目开发之登录
    使用vue-cli搭建SPA项目
    ElementUI入门和NodeJS环境搭建
    struts文件上传
    Struts增删改查
    struts
    Maven
    easyui三
    EasyUi权限
    自定义MVC三
  • 原文地址:https://www.cnblogs.com/baixc/p/3670595.html
Copyright © 2011-2022 走看看