我一起努力获取头部的布局.
这是迄今为止的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本身的背景.然后将图像“logo.png”和div“loginBox”显示在“headerBg.jpg”上方.
该标志应该浮动到最左端,并且loginBox浮动到最右边,如在css中.
随着图像被删除,标志和div被正确放置,但是当引入图像时,它们将两个浮动物品放置在流动中的图像之后.
我已经尝试了各种补充和重新配置,但没有一个证明可以解决我想要的方式.
我已经将CSS中的图像作为标题div的背景添加了,但它并没有以100％的速度伸展.
有人能够提供一些洞察力吗？
还有任何涵盖这样的东西的教程将是我收藏的一个很好的补充！
谢谢！
解决方法
<!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>
