如何在网站Header右上角添加图片？附现有代码及失败尝试

你之前写的代码存在语法错误：<div <img src=&quot;images/img-clientes.gif&quot; </div>既没有正确闭合<div>标签，<img>标签也缺少闭合符号/>和必要属性，这是导致添加失败的核心原因。

步骤1：修改HTML结构 #

在header的logo所在wrap容器内，新增一个专门放置右上角图片的容器，利用现有布局结构实现定位。修改后的完整header代码如下：

<body id="body"><a id="top"></a>
<div id="header" class="clearfix">
    <div class="wrap clearfix">
        <div id="logo" class="cover transition "><a href="/Ingbadino/index">Ing. Badino y Asoc. SRL </a></div> 
        <!-- 新增右上角图片容器 -->
        <div class="header-right-image">
            <img src="images/img-clientes.gif" alt="客户标识" />
        </div>
    </div>
    
    <div id="nav">
        <div class="wrap clearfix">
            <ul>
                <li class="first"><a href="/" class="<?php if ($section=="home") print "active" ?>">Inicio</a></li>
                <li><a href="empresa" class="<?php if ($section=="empresa") print "active" ?>">La Empresa</a></li>
                <li><a href="clientes" class="<?php if ($section=="clientes") print "active" ?>">Nuestros Clientes</a></li>
                <li><a href="portfolio" class="<?php if ($section=="portfolio") print "active" ?>">Portafolio de Obras</a></li>
                <li class="last"><a href="contacto" class="<?php if ($section=="contacto") print "active" ?>">Contacto</a></li>
            </ul>
        </div>
    </div>
    <div id="mobile_links"><a href="#" class="mobile_nav closed"><i class="fa fa-bars"></i></a></div>
</div>

步骤2：添加CSS样式 #

为让图片固定在右上角，需给父容器（.wrap）设置相对定位，再给图片容器设置绝对定位：

/* 给父容器设置相对定位，作为绝对定位的参考基准 */
#header .wrap {
    position: relative;
}

/* 将图片容器定位到右上角 */
.header-right-image {
    position: absolute;
    top: 0;
    right: 0;
    /* 根据需求调整与边缘的间距 */
    margin: 10px 15px;
}

/* 可选：控制图片大小，避免超出header范围 */
.header-right-image img {
    max-width: 100px;
    height: auto;
}

注意事项 #

• 确认图片路径images/img-clientes.gif正确，路径是相对于当前HTML文件的位置。
• 如果现有CSS中.wrap已设置position: relative，可省略对应CSS代码。
• 调整margin和max-width数值，让图片与header布局更协调。

内容的提问来源于stack exchange，提问作者Marto