Question

我正在使用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像素。

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

Answer 1

在Interstingly中，由于您触发Quirks模式（在<!DOCTYPE>之前移除注释以解决问题），因此在IE中不会发生这种情况。

问题是由浮子造成的。要解决此问题，只需将overflow:hidden添加到Container div。

Answer 2

结束标记</html> and </body>丢失，和

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

Container Div意外停止

2 个答案: