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

zmeyuzjn 于 2022-11-27 发布在 WordPress

关注(0)|答案(2)|浏览(74)

我正在使用折叠一些文本内容。当我们切换。div uppends到上面的div在wordpress的内容。请检查附件图片，以进一步了解这个问题。
我试过使用<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>

css

来源：https://stackoverflow.com/questions/45182461/dynamic-collapse-div-wrong-align-wordpress

2条答案

按热度按时间

9cbw7uwe1#

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

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

赞(0）回复(0）举报 2022-11-27

jchrr9hc2#

我找到了一个不同的解决方案，它完美地工作了我的senario：

.collapse {
    overflow: hidden;
}

赞(0）回复(0）举报 2022-11-27

我来回答

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

2条答案

相关问题

热门标签

最新问答