水平排列圖像

我正在創建圖像滑塊，一次只顯示2個圖像，左右兩個箭頭移動圖像，我必須將圖像水平放置，但只有兩個圖像內嵌和其他圖像正在下降，我設置溢出隱藏到圖像容器，我不能設置容器的寬度作爲圖像的數量可能非常動態水平排列圖像

所以我怎麼能設置所有的圖像水平（屏幕上的2個圖像，其他人隱藏爲容器屬性溢出：隱藏）

藍色是容器，綠色框是圖像。

enter image description here

代碼

 <div id="slidearea"> 
<div id="slider"> 

     <img alt="image" id="0" src="images/thum-1.jpg" style="margin-right: 5px; opacity: 0.5; border-color: rgb(255, 255, 255);"> 

     <img alt="image" id="1" src="images/thum-2.jpg" style="margin-right: 5px; opacity: 0.5;"> 

     <img alt="image" id="2" src="images/thum-3.jpg" style="margin-right: 5px; opacity: 0.5;"> 

     <img alt="image" id="3" src="images/thum-1.jpg" style="margin-right: 5px; opacity: 0.5;"> 

     <img alt="image" id="4" src="images/thum-2.jpg" style="margin-right: 5px; opacity: 0.5;"> 

     <img alt="image" id="5" src="images/thum-3.jpg" style="opacity: 0.5;"> 
     </div> 
     </div>

來源

2011-11-07 John K

所以你說，前兩個圖像正確對齊，但其他的都是進一步下降，並且不與第一對齊二？他們是否與彼此對齊？例如，圖像3+全部對齊，圖像1和2對齊，但不是這兩個組？ – sdo

通過使用white-space & inline-block性能做到這一點。

例如像這樣：

#container{ 
    overflow:hidden; 
    width:300px; 
    margin:30px auto; 
    background:yellow; 
} 
#container #slider{ 
    white-space:nowrap; 
} 
img{ 
    opacity:0.5; 
    display:inline-block; 
    *display:inline;/*IE*/ 
    *zoom:1;/*IE*/ 
    background:red; 
}

檢查小提琴http://jsfiddle.net/SNeVH/1/

來源

2011-11-07 11:11:03 sandeep

水平排列圖像

回答

相關問題