如何在div中強制/包裝<img>？

我有一個Wrapper，其中包含一堆用fancybox圖片庫的縮略圖。如何在div中強制/包裝<img>？

<div class="wrapper"> 
    <a href><img thumbnail></a> 
    <a href><img thumbnail></a> 
    <a href><img thumbnail></a> 
    ... 
</div>

該包裝具有定義的width。縮略圖的數量從1到...問題是，包裝內的空間只有最多7個縮略圖。因此，所有7以上的縮略圖將顯示在外面。我怎樣才能存檔所有的縮略圖將保留在包裝的內部，以便所有7個都隱藏起來？

非常感謝。

來源

2016-12-16 John

這個CSS添加到您的.wrapper DIV

.wrapper { 
    overflow:hidden; 
}

來源

2016-12-16 09:06:46 ab29007

您可以添加滾動您.wrapper.it可以通過添加實現溢出-X：滾動;溢出-Y：滾動;到您的.wrapper。這將保持你的包裝大小相同，你可以根據需要添加任何圖像。

.wrapper{ 
 
    width:300px; 
 
    height:200px; 
 
    overflow-x:scroll; 
 
    overflow-y:scroll; 
 
    background:yellow; 
 
    } 
 
img{ 
 
    width:100px; 
 
    height:100px; 
 
    margin:10px; 
 
    }

<div class="wrapper"> 
 
<a href><img src="https://i.stack.imgur.com/O2JkH.jpg" thumbnail></a> 
 
<a href><img src="https://i.stack.imgur.com/O2JkH.jpg" thumbnail></a> 
 
<a href><img src="https://i.stack.imgur.com/O2JkH.jpg" thumbnail></a> 
 
<a href><img src="https://i.stack.imgur.com/O2JkH.jpg"thumbnail></a> 
 
<a href><img src="https://i.stack.imgur.com/O2JkH.jpg"thumbnail></a> 
 
<a href><img src="https://i.stack.imgur.com/O2JkH.jpg"thumbnail></a> 
 
<a href><img src="https://i.stack.imgur.com/O2JkH.jpg"thumbnail></a> 
 
<a href><img src="https://i.stack.imgur.com/O2JkH.jpg"thumbnail></a> 
 
<a href><img src="https://i.stack.imgur.com/O2JkH.jpg"thumbnail></a> 
 
<a href><img src="https://i.stack.imgur.com/O2JkH.jpg"thumbnail></a> 
 
<a href><img src="https://i.stack.imgur.com/O2JkH.jpg"thumbnail></a> 
 
<a href><img src="https://i.stack.imgur.com/O2JkH.jpg"thumbnail></a> 
 

 
</div>

來源

2016-12-16 09:12:11

你有沒有試着用

溢出：隱藏重要的;（CSS）。

來源

2016-12-16 09:13:45

如何在div中強制/包裝<img>？

回答

相關問題