Question

我有一个图像幻灯片，其中一些图像以响应模式显示。在下面，我想制作一个导航栏。

< script type = "text/javascript" > $(document).ready(function () {
    $("#slideshow img:gt(0)").hide();
    setInterval(function () {
        $('#slideshow > img:first')
            .fadeOut(2000)
            .next()
            .fadeIn(2000)
            .end()
            .appendTo('#slideshow');
    }, 4000);
});
< /script>
<body style="background-color: #F2F2F2;">
    <div style="background-color: black;">hallo</div>
    <br/>
    <div id="slideshow" style="margin: auto;width: 90%;" class="cf">
        <img class="logo" src="images/logo1.png" />
        <img class="logo" src="images/logo_2.png" />
        <img class="logo" src="images/logo_s2.png" />
    </div>
    <br/>
    <div id="menu" style="background-color: black;">hallo</div>
</body>

CSS

.logo {
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
}

#slideshow img {
position: absolute;
}

#slideshow {
position: relative;
}

问题是菜单div不想低于幻灯片。它只是悬挂在幻灯片中间的一半。幻灯片中的图像位于绝对位置。

我尝试应用以下clearfix但它不起作用。

更多CSS

.logo:after {
clear: both;
}

.cf:after {
clear: both;
}

如何定位此div以使其始终位于其下方。

ps我不是一个CSS向导，所以请在downvoting之前考虑到这一点。我在发布这个问题之前已经尝试了3个小时。

Answer 1

我认为你不会在你的帖子中放入所有的CSS规则。最有可能的是，这些图像是位置：绝对的，或者你是浮动的东西，否则下一个图像将出现并“按下”当前图像，这不是一个好的用户体验。

假设这是真的，那么我建议使用clearfix。基本上，您创建一个类并创建一个应用了clear: both;的伪元素：

.cf:after {
    clear: both;
}

并将其应用于此行：

<div id="slideshow" style="margin: auto;width: 90%;" class="cf">

此外，您可能已经知道了最佳实践，但是：内联样式通常很难使用，并尝试将脚本放在标记的底部。

Answer 2

我使用以下插件修复了它。

Response Slides

响应式CSS将DIV与另一个DIV对齐，高度为：auto

2 个答案: