动态崩溃 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;
}

动态崩溃 div 错误对齐 - Wordpress

Dynamic collapse div wrong align - Wordpress

html

css

wordpress

collapsable

collapse