动态折叠 div 错误对齐 - Wordpress答案

【问题标题】：Dynamic collapse div wrong align - Wordpress动态折叠 div 错误对齐 - Wordpress
【发布时间】：2017-12-24 05:55:59
【问题描述】：

我对一些文本内容使用折叠。当我们切换时。 div 在 wordpress 内容中与上述 div 相匹配。请检查附件图片以进一步了解问题。

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

如果您看到上面的图片，What are u 的内容应该在下面，但它会上升到上面的 div。除了padding还有什么解决办法吗？

<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>

【问题讨论】：

你能分享你的html/css
请提供代码。可能是一个循环问题。
由于它是动态的，我无法获得完整的页面。我复制了折叠部分。

标签： html css wordpress collapse collapsable

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

我找到了一个不同的解决方案，它非常适合我的场景：

.collapse {
    overflow: hidden;
}

【讨论】：