html - 为动态内容扩展祖父 div 的高度

Question

首先我想说我对css不是很好。这是我的场景-

Grandparent div(cd-timeline-block)
--------------------------------------------------------------------

left-Parent(cd-timeline-content) right parent(cd-timeline-img)
----------------------------     --------

child 1 of left-parent(content)                  child 2 of leftparent
                                                (cd-layer-2)
----------------------------                     ---------------

此场景是在 for 循环中为动态内容生成的。但问题始终是祖 parent div 采用“左父 div 的子 1”的高度并根据该高度创建下一个 block 。在某些情况下，“child2 左父”内容更大，在这种情况下，下一个 block 出现在 child 2 的顶部。

这是我的代码:

<div class="cd-timeline-block">
    <div class="cd-timeline-img cd-picture">
    </div>
    <div class="cd-timeline-content">
         <div class="content">
         </div>
         <div class="cd-layer2">
             <div class="content-2">
             </div>
        </div>
    </div>
</div>

这是我的CSS:

.cd-timeline-block {
 position: relative;
 margin: 1em 0;
height: auto;
}

.cd-timeline-img {
width: 60px;
height: 60px;
left: 50%;
margin-left: -29px;
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
position: absolute;
top: 0;
}   

.cd-timeline-content {
 margin-left: 0;
 width: 45%;
 position: relative;
}

.content {
 position: relative;
}

.cd-timeline-content .cd-layer2 {
font-size: 1em;
left: 121%;
position: absolute;
top: 0px;
width: 100%;
float: left;
}

.content-2 {
margin-left: 0;
position: relative;
}

我想获得“左父(内容)的 child 1”和“左 parent (cd-layer2)的 child 2”之间的最大高度，并根据它显示下一个祖 parent (cd-timeline-block)高度。这里要再提一下，child 1和child2的高度是可以根据动态内容变化的，所以不能固定高度。。

Answer 1

我刚刚用 javascript 解决了这个问题。虽然用 js 来解决 css 问题并不优雅，但我不喜欢它。如果有人给我更优雅的方式，非常感谢。

    var setHeight1 = $(".cd-timeline-content").height();
    var setHeight2 = $(".cd-layer2").height();
    if (setHeight2 > setHeight1) {
        $(".cd-timeline-content").height(setHeight2);
    };