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;
}

 

posted @ 2014-04-17 13:58  白小虫  阅读(237)  评论(0编辑  收藏  举报