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

-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

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

回答

相關問題