html - 动态折叠 div 错误对齐 - Wordpress

Question

我正在对某些文本内容使用折叠。当我们切换时。 div uppends 到 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;
}