时间戳

首页 > 解决方案 > 如何在此标题中添加两个图像？

html - 如何在此标题中添加两个图像？

问题描述

我有一个看起来像这样的标题。现在我想在标题右侧添加图像，作为联系人和帮助链接按钮。

我怎样才能做到这一点？

#header {
    position: absolute;
    top: 0px;
    height: 40px;
    color: #eee;
    background: linear-gradient(#fff, #e3e3e3);
    width: 100%;
}

#header img {
    float: left;
    margin-top: 14px;
    margin-left: 10px;
    width: 142px;
    height: 12px;
}

和

<div id="header">
    <img src="logo.png" alt="logo" />
</div>

标签： htmlcss

解决方案

如果您希望第二张图像右对齐。

<img>我在原始元素下方添加了一个新元素，并为它们分配了一个 id。即logo1和logo2。

#header {
  position: absolute;
  top: 0px;
  height: 40px;
  color: #eee;
  background: linear-gradient(#fff, #e3e3e3);
  width: 100%;
}

#header img,
#logo1 {
  float: left;
  margin-top: 14px;
  margin-left: 10px;
  width: 142px;
  height: 12px;
}

#header #logo2 {
  float: right;
}
<div id="header">
  <img id="logo1" src="logo.png" alt="logo" />
  <img id="logo2" src="logo2.png" alt="logo" />
</div>

推荐阅读