html - htmlcss简单图像对齐问题

我有一个标题，我要在其中添加一个小的渐变间隔图像，并且它没有移动到需要的位置（请参见红色箭头以获取所需的位置）：



我尝试了img标签的几种不同版本，并添加了一个带或不带float：left样式的封闭div，但到目前为止没有骰子。我在做什么错/如何解决？请注意，渐变间隔图像的名称为header_gradient_spacer.png。

谢谢。

附言如果您想在网站上看到该问题，请转到www.momentumnow.biz
 

<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">

最佳答案

因为包含闪光灯和图像的div具有固定宽度，不足以同时将它们排成一行，所以它将渐变图像放在下面。要解决此问题，只需从style.css中的width中删除​​div.headerLeft