html - 如何防止垂直溢出但允许水平溢出

Question

我正在尝试缩放图像，并在缩放图像的底部有小图像，用户可以单击这些图像进行缩放。缩放是正确的，但微小的图像并没有像它应该的那样溢出。我希望 div(other_media) 中的图像避免垂直溢出但允许水平溢出，以便用户只能左右滚动。 这是小图片的 html 和 css

#listing{
    float:left;
    height:80px;
    width:80px;
    margin:2px;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3); 
    -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3); 
    box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
<div id="other_media">
   while($ots = mysql_fetch_array($other)){ ?>
      <div id="listing">
         <img src="<?php echo $paths; ?>" id="<?php echo $ots['class']; ?>" />
      </div>
   <?php } ?>
</div>

Answer 1

如果你想隐藏文字垂直溢出:

溢出-x:滚动； 溢出-y:隐藏；

否则:

#other_media {
    overflow-x: scroll;
}
.listing{
    height:80px;
    width:80px;
    margin:2px;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3); 
    -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3); 
    box-shadow: 0 1px 3px rgba(0,0,0, .3);
    display:inline-block;
}
<div id="other_media">
   while($ots = mysql_fetch_array($other)){ ?>
      <div class="listing">
         <img src="<?php echo $paths; ?>" id="<?php echo $ots['class']; ?>" />
      </div>
   <?php } ?>
</div>