html - 如何让 HTML 元素变大？

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

希望对您有所帮助。祝你好运!