如何在页眉中并排放置两个图像答案

【问题标题】：How To Place Two Images Side By Side In Header如何在页眉中并排放置两个图像
【发布时间】：2016-01-07 18:37:58
【问题描述】：

我需要在标题中将两张图片并排放置。一个是徽标，一个是横幅图像 - 徽标是返回主页的链接。标题的背景颜色为红色，因此一旦添加了横幅，标题的大部分将被隐藏，除了底部的红色细线。我试过这个：

CSS：

div.container {
  display:inline-block;
}

HTML：

<header>
<div class="container">
<a href="index.html><img class="logo" src="images/logo.jpg" height="110"
width="200"></a>
</div>
<div class="container">
<img class="banner" src="images/banner.jpg" height="110" width="800">
</div>

但它没有工作。这是显示网页的屏幕截图。横幅应位于徽标“Sean's”的右侧

尝试后：

div.container {
display:inline-block;
Width:auto!important;
}

链接到完整的 HTML、CSS 和 Javascript：http://jsfiddle.net/HappyHands31/kzbvLheq/

【问题讨论】：

请提供更多信息（jsfiddle等）。
链接到带有完整代码的 jsfiddle：jsfiddle.net/5v2a317d
这里是正确的链接：jsfiddle.net/HappyHands31/kzbvLheq
那个解决方案效果不好？
是的。这是有效的代码：jsfiddle.net/HappyHands31/kzbvLheq 但是页面必须打开得足够宽，以便两张图片可以放在同一行。

标签： html css image header alignment

【解决方案1】：

试试这个，希望这能解决你的问题.. 如果您仍然遇到任何问题，请显示整个代码或 URL

div.container {
  display:inline-block;
  Width:auto!important;
}

【讨论】：

【解决方案2】：

你的问题出在这行代码：

<a href="index.html>

您忘记关闭href 标记后的引号。您应该将其替换为

<a href="index.html">

否则，您的代码可以正常工作。

完整代码：（注意第 3 行的更改）

<header>
    <div class="container">
        <a href="index.html"><img class="logo" src="images/logo.jpg" height="110"
        width="200"></a>
    </div>
    <div class="container">
        <img class="banner" src="images/banner.jpg" height="110" width="800">
    </div>
</header>

我对你的另一个建议是制作图像inline-block，而不是在它们周围放置一个容器 div。它的工作方式相同，代码中的元素更少。

CSS

img {
    display: inline-block;
}

JSFiddle：http://jsfiddle.net/5v2a317d/

【讨论】：

至于关闭引号，这只是一个错字，因为我将代码从我的文本编辑器转移到这里。你的 img { display: inline-block; } 建议奏效。谢谢！

【解决方案3】：

图像的宽度（.banner 和.logo）大于它们的父级（header），所以.banner 进入第二行。你可以减小.banner的大小（例如200）

link

【讨论】：