我试图将两个图像并排放置在标题中,但无法使其正常工作。重要的是,一个比另一个高一些,但我认为这不应该成为问题

在失败的尝试中(我什至无法使它们完全漂浮),我将其设置如下...总标题区域为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;
}

10-05 20:56
查看更多