Question

请我的HTML或CSS工作：）

http://theironlady.airsoftware.co.uk/

我被问到为什么推荐书有时会漏出父容器。我只能假设它与循环文本的脚本有关？任何人都可以对此有所了解吗？

<div id="testimoniesWrapper">
        <center>
        <div class="cycle-slideshow" id="testimonies" data-cycle-fx="fade" data-cycle-timeout="5000" data-cycle-slides="> div" style="position: relative;"><div style="display: block; position: static; top: 0px; left: 0px; z-index: 100; opacity: 1; visibility: hidden;" class="cycle-slide cycle-sentinel">
                    <blockquote style="visibility: hidden;">
                        Excellent service, ironing is done to a very high standard and very quickly - well worth the money.
                        <cite style="visibility: hidden;">Kelly McAneny
 from Tamworth
</cite>
                    </blockquote>
                </div>
                    <div style="display: block; position: absolute; top: 0px; left: 0px; z-index: 80; opacity: 0; visibility: hidden;" class="cycle-slide">
                    <blockquote>
                        Excellent service, ironing is done to a very high standard and very quickly - well worth the money.
                        <cite>Kelly McAneny
 from Tamworth
</cite>
                    </blockquote>
                </div><div style="display: block; position: absolute; top: 0px; left: 0px; z-index: 79; visibility: hidden; opacity: 0;" class="cycle-slide">
                    <blockquote>
                        Really pleased with the Ironing service from the Iron Lady - a life saver! Good value for money and even get a reminder when I've forgotten to deliver my items!
                        <cite>Liz Whitehouse
 from Tamworth
</cite>
                    </blockquote>
                </div>
        </center>
    </div>

Answer 1

这是因为子div（.cycle-slide）绝对定位。

绝对定位的东西将从“文档流程”中删除，因此，父级#testimoniesWrapper不会扩展以容纳子级。

您可以使用以下内容解决此问题：

/* statically position slides so that their parent expands as expected.
   also hide them by default */
#testimoniesWrapper .cycle-slide {
    position: static !important;
    display: none !important;
}

/* show only the active child testimonial slide */
#testimoniesWrapper .cycle-slide-active {
    display: block !important;
}

希望有所帮助。祝你好运！

如何让HTML元素增加？

1 个答案: