css布局多列等高且高度自适应

最新推荐文章于 2024-03-28 15:35:59 发布

caoruntie

最新推荐文章于 2024-03-28 15:35:59 发布

阅读量558

点赞数

分类专栏：软编码文章标签：前端css

本文链接：https://blog.csdn.net/caoruntie/article/details/84606585

版权

软编码专栏收录该内容

74 篇文章 0 订阅

订阅专栏

<div class="container">
    <div class="col col-a">
        <p>In the beginning God created the heavens and the earth.</p>
    </div>
    <div class="col col-b">
        <h2>The Book of John</h2>
        <p>In the beginning was the Word, and the Word was with God, and the Word was God.</p>
    </div>    
    <div class="col col-c">
        <h2>The Book of Genesis</h2>
        <p>In the beginning God created the heavens and the earth.</p>
        <p>Now the earth was formless and empty, darkness was over the surface of the deep, and the Spirit of God was hovering over the waters.</p>
    </div>
</div>

.container{
    zoom:1; /* for IE6 */
    overflow:hidden;
}
.col{
    float:left; 
    padding-bottom:3000px;
    margin-bottom:-3000px; 
}
.col-a{ 
    width:240px;
    background:#FDFD97;
}
.col-b{
    width:280px;
    background:lightgreen;
}
.col-c{
    width:320px;
    background:#E0DCDC;
}

这个布局技巧的原理是：我们设置每一列的padding-bottom足够大（根据盒模型，背景色存在于padding上），但这撑大了外层容器的高度，接着我们通过设置列的margin-bottom为负值（绝对值与padding-bottom相等），并且外层容器的overflow为hidden，使容器高度回到原有值，它截断了每一列，这看起来就是我们想要的效果。