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;
    }
    高否?富否?帅否? 否? 滚去学习!
  • 相关阅读:
    《Spring_Four》第二次作业 基于Jsoup的大学生考试信息展示系统开题报告
    《Spring_Four》第一次作业:团队亮相
    4.11jsp
    4.7jsp
    3.17jsp
    3.24jsp
    3.10jsp
    3.4软件测试
    回文串
    博客园第二次作业
  • 原文地址:https://www.cnblogs.com/baixc/p/3670595.html
Copyright © 2011-2022 走看看