css – 让孩子们分辨出最高的孩子的身高

前端之家收集整理的这篇文章主要介绍了css – 让孩子们分辨出最高的孩子的身高前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有两个孩子< div>父容器内的元素< div>如图所示:
<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.1);
    display: inline-block;
}

.row {
    border: 1px solid red;
}

如何让两个孩子(div.item)成为最高的孩子的高度?

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

解决方法

一个解决方案是将后代div.item元素的内嵌块显示值更改为表格单元格:
.row {
    border: 1px solid red;
    display: table;
    border-spacing: 20px; /* For controlling spacing between cells... */
}
.item {
    background: rgba(0,0.1);
    display: table-cell;
}

Example

原文链接:https://www.f2er.com/css/217071.html

猜你在找的CSS相关文章