Question

我需要一些帮助。我希望带有“banner”类的图像与浏览器窗口的宽度成比例地伸展。如何使用类“bannerBox”获取div的高度以适应具有类“banner”的图像的可变高度，以及如何使用类“container”将div定位在横幅图像下？

带有“banner”类的图像应该是具有许多交叉淡入淡出图像的图像旋转器。我把其他图片和javascript拿出来简化我的代码，这样很容易理解。

谢谢。

这是样式表：

.bannerBox
    {
    background:#f0f;
    min-height:100px;
    width:100%;
    }

.banner
    {
    width:100%;
    position:absolute;
    }

.container
    {
    background:#ff0;
    width:1000px;
    height:20px;
    margin:auto;
    text-align:center;
    padding:50px 0px 50px 0px;
    }

这是html

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>

            <div class="bannerBox">
                <img class="banner" id="banner1" src="http://hascob.com/banner1.jpg">
            </div>

            <div class="container">
                <p>Hello!</p>
            </div>

    </body>
</html>

Answer 1

您的横幅类具有绝对定位。这会导致图像相对于浏览器窗口定位。删除它会将其添加回页面流

position:absolute;

这导致了所有问题。

JsFiddle

将div的高度设置为div内没有高度的图像

1 个答案: