像 css 一样的轮播，overflow-x（仅限水平）答案

【问题标题】：carousel like with css, overflow-x (horizontal only)像 css 一样的轮播，overflow-x（仅限水平）
【发布时间】：2012-07-15 21:46:02
【问题描述】：

我有一个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>

【问题讨论】：

标签： html image css carousel

【解决方案1】：

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

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

或者（我敢说）使用table。

【讨论】：