让孩子划分最高的孩子的身高 [英] Make children divs the height of tallest child

问题描述

我在父容器< div> 中有两个子< div> 元素：

I have two child <div> elements inside of a parent container <div> as shown:

<div class="row">
    <div class="item">
        <p>Sup?</p>
    </div>
    <div class="item">
        <p>Sup?</p>
        <p>Wish that other guy was the same height as me</p>
    </div>
</div>

我试过下面的CSS：

.item {
    background: rgba(0,0,0,0.1);
    display: inline-block;
}

.row {
    border: 1px solid red;
}

如何获得两个孩子（ div.item

How can I get both children (div.item) to be the height of the tallest child?

jsFiddle： http://jsfiddle.net/7m4f7/

jsFiddle: http://jsfiddle.net/7m4f7/

推荐答案

一个解决方案是将显示值从<后代 div.item 的 inline-block 到 table-cell >元素：

One solution is to change the display value from inline-block to table-cell for the descendant div.item elements:

.row {
    border: 1px solid red;
    display: table;
    border-spacing: 20px; /* For controlling spacing between cells... */
}
.item {
    background: rgba(0,0,0,0.1);
    display: table-cell;
}

示例

这篇关于让孩子划分最高的孩子的身高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！