16

我正在努力将我想到的标题布局放在一起。

这是到目前为止的html：

<div id="header">
    <img src="/img/headerBg.jpg" alt="" class="headerBg" />
    <a href="/"><img src="/img/logo.png" alt="Logo" class="logo" /></a>
    <div id="loginBox">
        other code
    </div>
</div>

到目前为止的CSS：

#header {
    height: 130px;
    margin: 5px 5px 0 5px;
    border: #0f0f12 outset 2px;
    border-radius: 15px;
}

#loginBox {
    float: right;
    width: 23.5%;
    height: 128px;
    font-size: 75%;
}

.headerBg {

}

.logo {
    width: 50%;
    height: 120px;
    float: left;
    display: block;
    padding: 5px;
}

我想要完成的是让图像“headerBg.jpg”显示为 div“header”的 100% 宽度，所以本质上它将是 div 本身的背景。然后在“headerBg.jpg”上方显示图像“logo.png”和div“loginBox”。

logo 应该浮动到最左边，而 loginBox 应该浮动到最右边，就像在 css 中一样。

移除图像后，logo 和 div 被正确放置，但是当图像被引入时，它们在流程中的图像之后放置了两个浮动项。

我尝试了各种添加和重新配置，但没有一个被证明可以解决我想要的问题。

我已将 css 中的图像作为背景添加到标题 div，但它不会以这种方式拉伸 100%。

任何人都可以对此提供一些见解吗？

此外，任何涵盖此类内容的教程都将成为我收藏的重要补充！

谢谢！

4

7 回答 7

11 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Render this</title>
    <style type="text/css">
#header {
    position:relative;
    height: 130px;
    margin: 5px 5px 0 5px;
    border: #0f0f12 outset 2px;
    border-radius: 15px;
}

#loginBox {
    position:relative;
    float: right;
    width: 23.5%;
    height: 128px;
    font-size: 75%;

}

.headerBg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.logo {
    position:relative;
    width: 50%;
    height: 120px;
    float: left;
    display: block;
    padding: 5px;
}
    </style>
</head>
<body>
<div id="header">
    <img src="img/headerBg.jpg" alt="" class="headerBg" />
    <a href="/"><img src="img/logo.png" alt="Logo" class="logo" /></a>
    <div id="loginBox">
        other code
    </div>
</div>

</body>
</html>
于 2012-04-14T21:50:49.150 回答
3 
.header {
    position: relative;
}

.headerBg {
    position: absolute;
    left: 0px;
    right: 0px;
    width: 100%;
}

请注意，这将缩放图像以适合<div>; 如果您只希望它水平调整大小，那么您应该明确设置高度。

max-width: 100%;如果您只希望图像在大窗口上缩放，您也可以尝试。

于 2012-04-14T22:22:30.933 回答
0

只需使标题背景图像成为该 div 的真实背景。Float 不会像 position: absolute 那样忽略其他对象。

#header {
    height: 130px;
    margin: 5px 5px 0 5px;
    border: #0f0f12 outset 2px;
    border-radius: 15px;
    background: url(headerBg.jpg);
}
于 2012-04-14T21:51:26.143 回答
0

设置不会显示任何额外部分的 div 类。

div {
overflow: hidden;
}
于 2013-06-17T04:47:47.120 回答
0

这些设置对我来说非常适合..它会为所有照片调整您的照片大小..

#headerBg {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 100%;

}

于 2015-05-04T06:45:27.703 回答
0 
 <!DOCTYPE html>
            <html>
                <head>
                    <title>W3.CSS</title>
                    <meta name="viewport" content="width=device-width, initial-scale=1">
                    <meta content="text/html; charset=iso-8859-2" http-equiv="Content-Type">
                    <!--link rel="stylesheet" href="#"-->
                    <style>
                        .mySlides {
                            display: none;
                        }

                        .header {
                            background-color: #f1f1f1;
                            padding: 30px;
                            text-align: center;
                            height: 195px;
                            display: flex;
                            align-items: center;
                            align-items: center;
                            justify-content: center;
                        }

                        .img2 {
                            float: center;
                            display: inline-block;
                        }
                    </style>
                    <style type="text/css">
                        .c4 {
                            max-width: 500px
                        }

                        .c3 {
                            width: 100%
                        }

                        .c2 {
                            display: inline-block;
                            text-align: center;
                            width: 100%;
                        }

                        .c1 {
                            max-width: 100%;
                            height: auto;
                        }
                    </style>
                </head>
                <body>
                    <h2 class="c2">Automatic Slideshow</h2>
                    <div id="header" class="c2">
                        <img class="img2 c1" src="./img/16px/avi.png" alt="Pineapple">
                        <h1 class="c2">
                            <a href="#">I want to be</a>
                        </h1>
                        <div class="c4">
                            <img id="carousel" src="" class="c3">
                        </div>
                    </div>
                    <script>
                        //set up things
                        var images = [];
                        images[0] = "./img/16px/avi.png";
                        images[1] = "./img/16px/bmp.png";
                        images[2] = "./img/16px/cpp.png";

                        var n = images.length - 1;
                        var carouselimg = document.getElementById("carousel");
                        var header = document.getElementById("carousel");
                        // preload all images
                        carouselimg.style.display = "none";
                        for (var i = 0; i < n; i++) {
                            carouselimg.src = images[i];
                        }
                        carouselimg.style.display = "block";
                        //prepare first round
                        var carouselIndex = 0;
                        // start show
                        rotate();

                        function rotate() {
                            var dr = header.getBoundingClientRect();
                            carouselimg.style.width = dr.width;
                            carouselimg.src = images[carouselIndex];
                            //index is a global variable

                            //so its state will be kept and we can load the first / next image
                            carouselIndex++;
                            // increment image array  index
                            if (carouselIndex > n) {
                                // do we rech the end
                                carouselIndex = 0
                                // start from begin
                            }
                            setTimeout(rotate, 2000);
                            // restart rotation every 2 seconds
                        }
                    </script>
                </body>
            </html>
于 2019-10-30T02:43:07.057 回答
-2

尝试在你的 CSS 中使用：

max-height:100%;
于 2017-02-22T06:22:29.543 回答