css - 如何让DIV随同层最高DIV自适应高度？

问题描述

问 题

同层级有6个DIV，都随内容自适应，且有边框圆角属性，如何用纯CSS实现所有DIV高度一致。

HTML

<div class="con-pop clearfloat">
    <div class="recommend-sort sort-box"><p>推荐排序</p></div>
    <div class="distance-sort sort-box"><p>离我最近</p></div>
    <div class="distance-sort2 sort-box"><p>离我最近离我最近</p></div>
    <div class="distance-sort2 sort-box"><p>离我最近离我最近</p></div>
    <div class="distance-sort2 sort-box"><p>离我最近离我最近</p></div>
</div>

SCSS

.con-pop{
    width:92%;
    margin:1.5rem 4%;

    .sort-box{
        width: 30%;
        min-height: 3.45rem;
        border:1px solid #e5e5e5;
        border-radius:0.5rem;
        margin-right:4.5%;
        padding: 0.7rem 2.5%;
        display: table;
        float: left;
        &:nth-child(n+4){
            margin-top:0.9rem;
        }
        &:nth-child(3n){
            margin-right: 0;
        }
        p{
            display: table-cell;
            text-align: center;
            vertical-align:middle; 
            font-size:1.6rem;
            color:#000000;
        }
    }
}

现在效果：

已使用解决方案：
1、padding-bottom和margin-bottom方法，但是会遮掉底部的border效果
2、使用父元素display:table，子元素display:table-cell，但是会挤在一行中，宽度30%自动忽略
3、Flex布局，只能实现同一行内高度自适应

解决方案

我觉得纯CSS可能实现不了这个功能哈。
首先，在浏览器中如果没有事先指定一个高度，并且父元素也没有设置，那么这个元素的高度就只能通过内部元素计算而来了。所以想想题主的需求，那么就出现矛盾，明明要靠子元素计算父元素高度，但又要事先将父元素等分计算后将高度赋值给子元素，这肯定是不可能的。
那么为什么同一行可以？因为一行中最高的那一个子元素决定了这一行的高度，父元素得到这个高度后再赋值给同行的其他子元素，这就没问题了。其实任何元素都不可能直接知道自己兄弟元素的高度的。

以上是我的理解，如果有不对的，请指正。

这篇关于css - 如何让DIV随同层最高DIV自适应高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！