試圖對齊一個容器內的3個圖像 - poss float問題？

Question

我想在一個容器中浮動左，中，右三個圖像（圖像有底層和頂層，鼠標懸停）。出於某種原因，正確的圖像將不會合作，而且我嘗試的任何圖像都會低於其他兩幅圖像。

容器寬度爲1200像素和圖像各自385px X 385px

我已經進入了一個高度值的容器，但是這並不能幫助 - INFACT我已經試過剛纔的一切......

我的CSS如下：

.container { overflow: hidden; 
    width:1200px; 
    } 
    #cf385 { 
    position:relative; 
    height:385px; 
    width:385px; 
    margin: 0 auto; 
    cursor: pointer; 
    } 
    #cf385 img { 
    position:absolute; 
    left:10px; 
    height:385px; 
    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 
    } 

    #cf385 img.top:hover { 
    opacity:0; 

我的HTML是：

<center> 
<div class="container"> 
<div style="float: left;"> 
<div id="cf385" onclick="location.href='hold.html';"> 
<img class="bottom"alt="del" height="385px" longdesc="del" src="images/Test-  images-to-delete/test385on.png" width="385px" style="left: 0px; top: 0px" /> 
<img class="top"alt="del" height="385px" longdesc="del" src="images/Test-images-to-delete/test385off.png" width="385px" style="left: 0px; top: 0px" /> 
</div></div> 
<div style="float: none;"> 
<div id="cf385" onclick="location.href='hold.html';"> 
<img class ="bottom"alt="del" height="385px" longdesc="del" src="images/Test-images-to-delete/test385on.png" width="385px" style="right: -10px; top: 0px; left: 0px;" /> 
<img class="top"alt="del" height="385px" longdesc="del" src="images/Test-images-to-delete/test385off.png" width="385px" style="right: -10px; top: 0px; left: 0px;"/> 
</div></div> 
<div style="float: right;"> 
<div id="cf385" onclick="location.href='hold.html';"> 
<img class="bottom"alt="del" height="385px" longdesc="del" src="images/Test-images-to-delete/test385on.png" width="385px" style="right: 0px; top: 0px;" /> 
<img class="top"alt="del" height="385px" longdesc="del" src="images/Test-images-to-delete/test385off.png" width="385px" style="right: 0px; top: 0px;"/> 
</div></div> 
</div> 

    </center> 

Answer 1

你有沒有試過改變浮點數：none：float：left;

float:none; 

在同一頁面上使用時似乎弄亂了其他花車。

或者，也可以使用顯示的div /圖像

display:inline-block; 

如果你給他們限定的高度和寬度，將對準然後彼此相鄰。

希望這有助於。

Answer 2

您可以使用唐的方法，或者您可以使用此

HTML

<center> 
    <div class="container"> 
     <div class="imageContainer"> 
      <div id="cf385" onclick="location.href='hold.html';"> 
       <img class="bottom"alt="del" height="385px" longdesc="del" src="images/Test-  images-to-delete/test385on.png" width="385px" style="left: 0px; top: 0px" /> 
       <img class="top"alt="del" height="385px" longdesc="del" src="images/Test-images-to-delete/test385off.png" width="385px" /> 
      </div> 
     </div> 
     <div class="imageContainer"> 
      <div id="cf385" onclick="location.href='hold.html';"> 
       <img class ="bottom"alt="del" height="385px" longdesc="del" src="images/Test-images-to-delete/test385on.png" width="385px" style="right: -10px; top: 0px; left: 0px;" /> 
       <img class="top"alt="del" height="385px" longdesc="del" src="images/Test-images-to-delete/test385off.png" width="385px" style="right: -10px; top: 0px; left: 0px;"/> 
      </div> 
     </div> 
     <div class="imageContainer"> 
      <div id="cf385" onclick="location.href='hold.html';"> 
       <img class="bottom"alt="del" height="385px" longdesc="del" src="images/Test-images-to-delete/test385on.png" width="385px" /> 
       <img class="top"alt="del" height="385px" longdesc="del" src="images/Test-images-to-delete/test385off.png" width="385px"/> 
      </div> 
     </div> 
    </div> 
</center> 

CSS

.container { 
    overflow: hidden; 
    width:1200px; 
} 
.imageContainer{ 
    float: left; 
    margin: 0 0 0 10px; 
} 
.imageContainer:first-child{  
    margin: 0 0 0 0; 
} 
#cf385 { 
    position:relative; 
    height:385px; 
    width:385px; 
    margin: 0 auto; 
    cursor: pointer; 
} 
#cf385 img { 
    height:385px; 
    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 
}  
#cf385 img.top:hover { 
    opacity:0; 
} 

我也清除了內嵌樣式，把風格在CSS文件所以你的HTML保持乾淨。

小提琴：http://jsfiddle.net/2FPAZ/

附：你不需要<center>標籤獲得相同的結果，你可以刪除這些。