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

http://www.w3schools.com/cssref/css3_pr_overflow-y.asp

刚设置：

#listing {
    overflow-y:hidden;
    overflow-x:scroll;
    ...
}

编辑：看看TylerKendrick的答案，它比我的更正确。

Answer 2

如果要隐藏文字垂直溢出：

overflow-x: scroll; overflow-y: hidden;

否则：

#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>

Answer 3

您是否尝试过overflow-x和overflow-x？

overflow-x:visible;
overflow-y:hidden;

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

3 个答案: