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

-1

我想缩放图像，并在放大的图像的底部有微小的图像，用户可以点击放大。放大是正确的，但小图像不会溢出它应该的方式。我希望div（other_media）中的图像避免垂直溢出，但允许水平溢出，以便用户只能左右滚动。这是微小的图像如何防止垂直溢出，但允许水平溢出

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

来源

2014-06-25 user2922439

删除PHP的东西，这是不相关的讨论。 – mpm

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

刚刚成立的HTML和CSS：

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

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

来源

2014-06-25 22:09:31 djbhindi

由于他的设置，这个回应并不完全正确。 '＃other_media'上的'overflow-x'应该设置为'scroll'。 –

啊，你是对的。我根据需要进行编辑;谢谢！ – djbhindi

几乎在那里;）他的'＃listing' div实际上是'float：left;'div的div。这意味着应用滚动到'overflow-x'不会达到预期的效果。（带图像的div水平滚动显示）他需要将'overflow-x：scroll;'应用到'＃other_media'元素，如我在下面的回答中所述。 –

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

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

来源

2014-06-25 22:10:39 Edna

如果你想文本垂直溢出隐藏：

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>

来源

2014-06-25 22:11:46

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

回答

相关问题