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;
}
高否?富否?帅否? 否? 滚去学习!
原文地址:https://www.cnblogs.com/baixc/p/3670595.html