动态崩溃div错误对齐 - Wordpress

Question

我正在使用折叠来处理一些文字内容。当我们切换。 div在wordpress内容上升到上面的div。请检查附件图像以进一步了解问题。

我尝试使用<br>，但它有所帮助。还尝试使用padding-top, padding-bottom但在某些情况下内容是动态的，因此填充会在div之间产生间隙。

如果您看到上面的图片，What are u内容应该在下方，但它会更新到上面的div。除了填充之外还有其他解决方案吗？

<div class="collapse">
    <p class="collapse-link" data-toggle="collapse" data-target="#collapse-136" aria-expanded="true"><span class="collapse-icon"><!-- --></span> Who ru ?</p>
    <div id="-collapse-136" class="-collapse-text collapse in" aria-expanded="true">
        <p><span class="TextRun SCX56189914" lang="EN-GB" xml:lang="EN-GB">
<span class="NormalTextRun SCX56189914">
<a href="opt1.jpg">
<img class="alignleft size-thumbnail wp-image-57609" src="opt1-150x150.jpg" alt="" width="150" height="150">
</a>Content Top Content Top Content Top Content Top Content Top Content Top Content Top Content Top Content Top Content Top Content Top Content Top Content Top Content TopContent TopContent Top Content Top
</span>
            </span>
        </p>
    </div>
</div>
<div class="collapse">
    <p class="collapse-link" data-toggle="collapse" data-target="#collapse-137" aria-expanded="true"><span class="collapse-icon"><!-- --></span> What Am I</p>
    <div id="-collapse-137" class="-collapse-text collapse in" aria-expanded="true">
        <p><span class="TextRun SCX56189914" lang="EN-GB" xml:lang="EN-GB">
<span class="NormalTextRun SCX56189914">
<a href="opt1.jpg">
<img class="alignleft size-thumbnail wp-image-57609" src="opt1-150x150.jpg" alt="" width="150" height="150">
</a>Content Wrong Content Wrong Content Wrong Content Wrong Content Wrong Content Wrong Content Wrong Content Wrong
Content Wrong Content Wrong Content Wrong Content Wrong Content WrongContent Wrong  Content Wrong Content Wrong Content Wrong Content Wrong Content Wrong Content Wrong Content Wrong Content Wrong Content Wrong Content Wrong Content Wrong Content Wrong Content Wrong Content Wrong Content Wrong Content Wrong Content Wrong Content Wrong Content Wrong Content Wrong
</span>
            </span>
        </p>
    </div>
</div>

Answer 1

只需添加以下CSS即可解决此问题：

.collapse {
    clear: both;
    width: 100%;
    float: left;
}

Answer 2

我找到了一个不同的解决方案，它对我的​​senario非常有效：

.collapse {
    overflow: hidden;
}