html - 像 css 一样的轮播，overflow-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

据我所知，最好的方法是在 div 中创建另一个image_contentsdiv。然后给这个 div 所有图像的宽度（必要时使用 JavaScript）。

另一种解决方案是display:table-cell在另一个 div 内的图像上使用display:table-row.

或者（我敢说）使用table.