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-cell的另一个div内的图片上使用display:table-row。

或（我敢说）使用table。

旋转木马像css，overflow-x（仅水平）

1 个答案: