设置多个模块（div）高度一致

最新推荐文章于 2024-08-05 00:42:25 发布

sunOpar

最新推荐文章于 2024-08-05 00:42:25 发布

阅读量7.1k

点赞数 1

分类专栏： web前端小白之路文章标签： html css 前端 web 高度一致

本文链接：https://blog.csdn.net/sunOpar/article/details/50754534

版权

web前端小白之路专栏收录该内容

24 篇文章 0 订阅

订阅专栏

实现目的

假设你的页面中有几列高度非固定的模块，他们的顶部是对齐的，而他们的高度会随着其内容的增删而变化，你又希望让他们无论如何都能保持高度一致，也就是说高度自适应且保持一致，这时就可以使用以下方法。

具体方法

1.首先给他们设置一个外包裹层。

效果如图：

具体如下
html：

<div class="content-wrap">------------外包裹层
    <div class="subcontent">------------每一列
        <img src="img/1.jpg" alt="风景">
        <div class="text">
            <p></p>
        </div>  
    </div>
    <div class="subcontent">------------每一列
        <img src="img/2.jpg" alt="风景">
        <div class="text">  
            <p></p>
        </div>
    </div>
    <div class="subcontent">------------每一列
        <img src="img/3.jpg" alt="风景">          
        <div class="text">  
            <p></p> 
        </div>  
    </div>
</div>

css部分就不说了，无亮点

2.然后给每一个模块设置尽可能大的padding-bottom，这样就隐含的将其父类包裹层高度撑大了，因为包裹层的高度默认是随内部变化而变化的。

效果图：

通过底部可以看出他们的高度还是不一致的。但是可以发现，包裹层的高度相当于模块中高度最高的那个。

2-1

css:

.subcontent{
    padding-bottom:10000px;
}

3.最后通过设置margin-bottom（负值）来抵消掉撑长的padding-bottom，可以这样理解，正的margin-bottom使包裹层向下伸，那么负的margin-bottom就会使得包裹层向上【卷】。通过设置负的margin-bottom，使得包裹层向上【卷】，其卷的水平线是一致，但是基线是根据高度最高的那一个模块来决定的（原因已经说过了，包裹层的高度相当于模块中高度最高的那个），最终使得三者高度一致。

可以这样理解：
1.三根绳子水平并排放置，长度分别为：50cm,20cm,30cm并且他们的头部在同一水平线上;
4-1
2.然后将他们每一个延长100cm,这样他们现在的高度分别是：150cm,120cm,130cm;
4-2
3.紧接着拿一把剪刀从底部开始向上剪100cm；
4-3
4.这时他们的长度分别为：50cm，20+30cm，30+20cm。
4-4