Question

我正在尝试将两个图像对齐。在IE8 +和FF中，它们正确对齐。在Internet Explorer 7中，无论我使用包含图像＃1和＃2的左div有多小，图像＃3都会被按下。

<div style="width: 490px; padding-left: 15px; padding-right: 15px; background-color: #000; padding-bottom: 10px;  ">
   <div id="header">
      <div id="imageLeftContainer">
         <div id="image1" style=""></div>
         <div style="margin-top: 7px;">
         <a href="http://www.google.com" target="_blank" style="text-decoration: none;"><img src="http://i40.tinypic.com/a40ntg.png" style="margin: 0; padding: 0; border: none;" /></a>
      </div>
    </div>
    <a href="http://www.google.com" target="_blank" style="text-decoration: none;"><img id="image3" src="http://i41.tinypic.com/n5mzxi.png" /></a>
   </div>
</div>

CSS：

#header
{
 clear: both;    
}

#imageLeftContainer
{
width: 292px;
display: inline-block;
margin: 0;
padding: 0;
margin-top: 20px;
zoom:1;
*display: inline;
_height: 100%;        
}

#image1
{
width: 292px;
height: 64px;
margin: 0;
padding: 0;
margin-top: 5px;
background: url(http://i40.tinypic.com/2z8w4uc.png);   
}

#image3
{
float: right;
width: 185px;
height: 108px;
margin: 0;
padding: 0;
margin-top: 15px;
border: none;   
}

Answer 1

如果您在float:left上放置了包含image1和image2的div。然后将float:right放在image3上的<a>标记上，它可以正常使用

jsfiddle - ＆gt; http://jsfiddle.net/bD87z/3/

无法在IE7中水平对齐彼此相邻的图像

1 个答案: