html/css简单图像对齐问题

我有一个标题，我在其中添加了一个小的渐变间隔图像，它没有移动到它需要的地方（查看红色箭头以获得所需的位置）：

我尝试了几个不同版本的img标记，并添加了一个包含或不包含float:left样式的div，但到目前为止还没有骰子。我做错了什么/如何修复它？请注意，渐变间隔图像名称为header_gradient_spacer.png

谢谢

另外，如果你想在网站上看到这个问题，请转到

if（（navigator.userAgent.match（/iPad/i）！=null）|（navigator.userAgent.match（/iPhone/i）！=null）|（navigator.userAgent.match（/iPod/i）！=null））{
document.getElementById（“iPhoneIPad1”）.style.display=“inline”；
document.getElementById（“notIphoneIPad1”）.style.display=“无”；
}
if（（navigator.userAgent.match（/iPad/i）！=null）|（navigator.userAgent.match（/iPhone/i）！=null）|（navigator.userAgent.match（/iPod/i）！=null））{
document.getElementById（“iPhoneIPad2”）.style.display=“inline”；
document.getElementById（“notIphoneIPad2”）.style.display=“无”；
}

鼓舞人心的运动

通过出色的结果显示

因为包含闪光灯和图像的

div

具有固定的宽度，这不足以将两者都放在行中，所以它将渐变图像放在下面。要解决此问题，只需从style.css中的

div.headerLeft

中删除

width

。。。注意，上面的代码略有更改。我在里面加了一个额外的div，果然做到了。我明白了，我忘了在添加间隔之后增加它的宽度（或者完全去掉宽度规格）。我一定累了！非常感谢你的帮助。

<div class="container">

<!-- RK: add a div and width to the top, so elements can't fold on top of each other --> 
<div class="header">
    <!-- RK: changed class from header to headerLeft, as added a headerRight -->
    <div class="headerLeft">
      <div style="float:left">
        <div id="iPhoneIPad1" style="display:none">
            <img src="/mn/images/a-350x120.png"  width="350" height="120" alt="Momentum Now">
        </div>

        <div id="notIphoneIPad1" style="display:inline">
          <object class="flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="350" height="120" id="flashHeader">
            <param name="movie" value="/mn/images/a-350x120.swf">
            <param name="play" value="true">
            <param name="loop" value="true">
            <!--[if !IE]>-->
            <object class="flash" type="application/x-shockwave-flash" data="/mn/images/a-350x120.swf" width="350" height="120">
              <param name="play" value="true">
              <param name="loop" value="true">
              <!--<![endif]-->
              <a href="http://www.adobe.com/go/getflashplayer"> <img src="/mn/images/a-350x120.png" alt="Get Adobe Flash player version 9.0.28 or later"> </a>
              <!--[if !IE]>-->
            </object>
            <!--<![endif]-->
          </object>
        </div>
        <!-- RSK added type attribute to script tag -->
        <script type="text/javascript">
           if ((navigator.userAgent.match(/iPad/i) != null) || (navigator.userAgent.match(/iPhone/i) != null) || (navigator.userAgent.match(/iPod/i) != null)) {
              document.getElementById("iPhoneIPad1").style.display = "inline";
              document.getElementById("notIphoneIPad1").style.display = "none";
           }
        </script>
      </div>
      <div style="float:left">
         <img src="/mn/images/header_gradient_spacer.png" width="25" height="120" alt="na" />
      </div>
    </div>


     <!-- RK: Added second Flash Header for the right side of top -->
    <div class="headerRight"  >
       <div id="iPhoneIPad2" style="display:none">
            <img src="/mn/images/HeaderRightFlash.png"  width="370" height="100" alt="Momentum Now">
       </div>

       <div id="notIphoneIPad2" style="display:inline">
         <object class="flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="370" height="100" id="flashHeader2">
            <param name="movie" value="/mn/images/HeaderRightFlash.swf">
            <param name="play" value="true">
            <param name="loop" value="true">
            <!--[if !IE]>-->
            <object class="flash" type="application/x-shockwave-flash" data="/mn/images/HeaderRightFlash.swf" width="370" height="100">
              <param name="play" value="true">
              <param name="loop" value="true">
              <!--<![endif]-->
              <a href="http://www.adobe.com/go/getflashplayer"> <img src="/mn/images/HeaderRightFlash.png" alt="Get Adobe Flash player version 9.0.28 or later"> </a>
              <!--[if !IE]>-->
            </object>
            <!--<![endif]-->
          </object>
       </div>

      <script type="text/javascript">
        if ((navigator.userAgent.match(/iPad/i) != null) || (navigator.userAgent.match(/iPhone/i) != null) || (navigator.userAgent.match(/iPod/i) != null)) {
            document.getElementById("iPhoneIPad2").style.display = "inline";
            document.getElementById("notIphoneIPad2").style.display = "none";
        }
      </script>         
      <p class="affiliate" align="right"><a href="/">Affiliate Care Members Only</a></p>            
    </div>

    <!-- RK: moved this after the headerRight, as that's what's needed to make it span the difference of the left and right header.
    Also, moved 'Affiliate Care Members' to next div section -->
    <div class="headerCenter">
        <p class="headerCenter">Inspiring Movement. <br /><br />  Revealed by outstanding results.</p>
    </div>              
    <br style="clear:both; line-height: 0" />
</div>  
<div class="mainnav">