我试图将两个图像并排放置在标题中,但无法使其正常工作。重要的是,一个比另一个高一些,但我认为这不应该成为问题
在失败的尝试中(我什至无法使它们完全漂浮),我将其设置如下...总标题区域为850 px,因此我将每个图像都分成两半
<div class="header a"><a href="http://example.com/">
<img src="http://example.com/pic.jpg" width="400" height="50" padding-left="10px" alt="dodobird" />
</a></div>
<div class="header b">
<a href="http://example.com/">
<img src="http://example.com/2.jpg" width="400" height="70" padding-left="10px" alt="dodobird" />
</a></div>
我失败的CSS就是这样。你能告诉我我做错了吗?
.header {
position: relative;
float: left;
width: 400px;
border: 1px solid #fff;
margin: 0 15px 15px 0;
padding: 5px 10px 10px 10px;
}
.header div {
width: 400px;
position: absolute;
top: 0;
left: 0;
}
.a div {
height: 50px;
}
.b div {
height: 70px;
}
最佳答案
您在两个div的标头上都有填充。
.header div是没有意义的,因为.header中没有div(在这种情况下,.header是div)。
您真正需要的是:
.header {
float: left;
width: 400px;
}
.a {
height: 50px;
}
.b {
height: 70px;
}