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循环生成动态内容。但问题始终是祖父母的div占据了左父母的孩子1的高度＆＃34;并根据该高度创建下一个块..在某些情况下＆＃34; child2 left parent＆＃34;内容更大，在这种情况下，下一个块出现在孩子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;
}

我希望得到左父母（内容）＆＃34;＆＃34;孩子1之间的最大高度和＆＃34;左父母的孩子2（cd-layer2）＆＃34;并根据该高度显示下一个祖父母（cd-timeline-block）。这里要再次提到，孩子1和孩子2的高度可以根据动态内容而变化，所以我无法修复高度..

Answer 1

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

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

扩展动态内容的grand-parent div的高度

1 个答案: