旋轉木馬像用CSS，溢出-x（僅水平）

Question

我有一個overflow-x:scroll和overflow-y:hidden。我有圖像，但是當我試圖讓它只能水平滾動時，它不起作用？當我突出顯示圖像並向下拖動突出顯示時，它會垂直向下滾動。

#contents 
{ 
margin:0 auto; 
text-align:center; 
width:1200px; 
clear:both; 
} 

#image_contents 
{ 
float:left; 
height: 208px; 
overflow-x:scroll; 
overflow-y:hidden; 
margin:0 auto; 
} 

.images 
{ 
float:left; 
margin:2px; 
background:#000;  
overflow:hidden; 
position:relative; 
display:inline-block; 
} 

<div id="contents"> 
<div id="image_contents"> 

    <div class="images"> 
     <img src="1.jpg"/> 
    </div> 

    <div class="images"> 
     <img src="2.jpg"/> 
    </div> 

    <div class="images"> 
      <img src="3.jpg"/> 
    </div> 

    <!-- and so forth !-> 
</div> 
</div> 

Answer 1

要做到這一點，最好的辦法，據我所知，將創建image_contents DIV內的另一個DIV。然後給這個div所有圖像的寬度（如有必要，使用JavaScript）。

另一種解決方案是在display:table-row的另一個div內的圖像上使用display:table-cell。或者（我敢說）使用table。