1

我正在使用 Nivo Slider 创建一个带有幻灯片的网站。出于某种原因，在我的 nivo 滑块 div 之后，即使我的所有 DIV 似乎都正确分层（并且正确关闭），我的容器 DIV 在 Nivo 滑块之后意外停止。

这是网站：http ://cbchaverhill.onedirectionconnection.com

以下是我的 DIV 的设置方式：

<div id="container" class="shadow">

<div id="title">
<div id="titleleft">Calvary Baptist Church</div>
<div id="cbcstuff">
Calvary Baptist Church<br>
13 Ashland Street<br>
PO Box 781<br>
Haverhill, MA 01830
</div>
</div>

<div id="navi">

<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'access', 'menu_class' => 'access' ) ); ?>

</div>

<div id="header">

<div id="slide">

<div id="slider" class="nivoSlider">
            <img src="/wp-content/themes/cbc/001.png" alt="" />
            <img src="/wp-content/themes/cbc/002.png" alt="" />
            <img src="/wp-content/themes/cbc/003.png" alt="" />
        </div>
<script type="text/javascript" src="/nivo-slider/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/nivo-slider/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
    effect: 'fade',
    animSpeed: 500,
    pauseTime: 4000,
    startSlide: 0,
    directionNav: false,
    directionNavHide: true,
    controlNav: false,
    controlNavThumbs: false,
    pauseOnHover: true,
    manualAdvance: false,
    randomStart: false,
});
});
</script>

</div>


<div id="sidebarr">

Blah blah blah Blah blah blah Blah blah blah Blah blah blah.
Blah blah blah Blah blah blah Blah blah blah Blah blah blah.

</div>

<div id="content">

如您所见，容器 DIV 在幻灯片放映后立即停止，出于某种原因，我似乎无法弄清楚，即使没有内容，页面也会延伸超过 4000 像素。

如果有人有任何意见，将不胜感激。如果您需要更多信息，请告诉我。

4

2 回答 2

0

有趣的是，由于您触发了 Quirks Mode，它不会在 IE 中发生（删除之前的注释<!DOCTYPE>以解决该问题）。

问题是由浮动引起的。要修复，只需添加overflow:hidden到您的 Container div。

于 2012-08-04T12:08:18.617 回答
0

缺少结束标签</html> and </body>，并且

如果您正在处理float，请将overflow属性添加到您的父 div 或clear:both 在浮动 div 之后添加。

于 2012-08-04T12:11:48.360 回答