Question

我的网站出现问题。 div类的填充顶部=＆＃34;行幻灯片内容＆＃34;表现得很奇怪。对于某些幻灯片，它大约是223px，而对于其他幻灯片，它使用不同的填充。

PHP

<div class="home-slider">
            <ul class="slides">

                <?php while ($slide =& $loop->next()): ?>

                    <li>
                        <div class="row slide-content">
                            <div class="large-10 large-centered columns text-center">                                                             
                                                      <?php if ( ! empty( $slide->button ) ) : ?>


                                        <div class="SLIDERLOGO"><?php echo $slide->button; ?> </div>


                                <?php endif; ?>


                                <?php if ( ! empty( $slide->ititle ) || ! empty( $slide->caption ) ) : ?>

                                    <div class="hero-title">
                                        <div class="large-3 columns nopad border-bottom"></div>
                                        <div class="large-6 columns text-center">

                                            <?php if ( ! empty( $slide->ititle ) ) : ?>

                                                <h4 class="text-white alt-h"><?php echo $slide->ititle; ?></h4>

                                            <?php endif; ?>

                                        </div>

                                        <?php if ( empty( $slide->ititle ) ) : ?>

                                                <div class="large-6 columns nopad border-bottom"></div>

                                        <?php endif; ?>

                                        <div class="large-3 columns nopad border-bottom"></div>
                                        <h1 class="text-white"><?php echo $slide->caption; ?></h1>
                                    </div><!--end of hero title-->

                                <?php endif; ?>



                            </div>
                        </div>

                        <img class="slider-bg" alt="<?php echo esc_attr( $slide->alt ); ?>" src="<?php echo esc_attr( $slide->img ); ?>" />
                    </li>

                <?php endwhile; ?>


            </ul>
        </div><!--end of Home slider-->

徽标插入此处

<?php echo $slide->button; ?>

这两个徽标的尺寸完全相同

JS //将HTML附加为幻灯片的CSS背景 //也是幻灯片内容的中心

jQuery('.home-slider .slides li').each(function () {

    var imgSrc = jQuery(this).children('.slider-bg').attr('src');
    jQuery(this).css('background', 'url("' + imgSrc + '")');
    jQuery(this).children('.slider-bg').remove();

    var slideHeight = jQuery(this).height();
    var contentHeight = jQuery(this).children('.slide-content').height();
    var padTop = (slideHeight / 2) - (contentHeight / 2);

    jQuery(this).children('.slide-content').css('padding-top', padTop);

});

这是我网站的链接 http://timberlife.nl

每次都不会发生，但有时徽标和页面顶部之间的填充会发生变化。我希望我已经足够解释了：）

非常感谢！大安

Answer 1

我已经打开调试器运行代码，可以将填充到-8px。我认为这是因为jQuery document.ready函数不会等待图像下载，所以你的li元素没有你期望的高度。

你可以在下面的代码中包装你的jQuery函数，看看是否等到图像加载修复了这个问题？

$(window).bind("load", function() {
}

JS用于不同的填充

1 个答案: