Div沒有與圖片擴大

Question

好吧，所以首先我已經嘗試過溢出：隱藏;但它沒有工作，所以基本上這是我的div看，但是當我添加更多的圖像到它的div不擴大與它。

什麼股利的樣子

.working{ 
 
    width: 600px; 
 
    height: 2000px; 
 
    background-color: #ECECEC; 
 
    border-style: ridge; 
 
    border-width: 5px; 
 
    overflow: hidden; 
 
}

<div class="working"> 
 

 

 

 
<p align: left; style="font-size: 25px; font-weight: bold; color: #39F51B; display: block;"> <img src="img/shopify.jpg" align="middle" style="width: 100px; height: 100px;"> 
 
Shopify dropshipping</p> 
 

 
<p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/code.png" align="middle" style="width: 100px; height: 100px;"> 
 
    Coding </p> 
 

 
<p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/ads.jpg" align="middle" style="width: 100px; height: 100px;"> 
 
    Advertisement </p> 
 
<p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/amazon.png" align="middle" style="width: 100px; height: 100px;"> 
 
    Amazon Mechanical Turk </p> 
 
<p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/fiverr.png" align="middle" style="width: 100px; height: 100px;"> 
 
    Fiverr </p> 
 
<p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/foap.jpg" align="middle" style="width: 100px; height: 100px;"> 
 
    Sell your photos </p> 
 
    <p align: left; style=" font-size: 25px; font-weight: bold; color: black;"><img src="img/pocketflip.jpg" align="middle" style="width: 100px; height: 100px;">PocketFlip</p> 
 
    </div>

Answer 1

它，因爲你有一個固定的高度。 嘗試刪除height:2000px。

.working{ 
 
    width: 600px; 
 
    background-color: #ECECEC; 
 
    border-style: ridge; 
 
    border-width: 5px; 
 
    overflow: hidden; 
 
}

<div class="working"> 
 

 

 

 
<p align: left; style="font-size: 25px; font-weight: bold; color: #39F51B; display: block;"> <img src="img/shopify.jpg" align="middle" style="width: 100px; height: 100px;"> 
 
Shopify dropshipping</p> 
 

 
<p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/code.png" align="middle" style="width: 100px; height: 100px;"> 
 
    Coding </p> 
 

 
<p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/ads.jpg" align="middle" style="width: 100px; height: 100px;"> 
 
    Advertisement </p> 
 
<p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/amazon.png" align="middle" style="width: 100px; height: 100px;"> 
 
    Amazon Mechanical Turk </p> 
 
<p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/fiverr.png" align="middle" style="width: 100px; height: 100px;"> 
 
    Fiverr </p> 
 
<p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/foap.jpg" align="middle" style="width: 100px; height: 100px;"> 
 
    Sell your photos </p> 
 
    <p align: left; style=" font-size: 25px; font-weight: bold; color: black;"><img src="img/pocketflip.jpg" align="middle" style="width: 100px; height: 100px;">PocketFlip</p> 
 
<p align: left; style=" font-size: 25px; font-weight: bold; color: black;"><img src="img/pocketflip.jpg" align="middle" style="width: 100px; height: 100px;">PocketFlip</p> 
 
<p align: left; style=" font-size: 25px; font-weight: bold; color: black;"><img src="img/pocketflip.jpg" align="middle" style="width: 100px; height: 100px;">PocketFlip</p> 
 
<p align: left; style=" font-size: 25px; font-weight: bold; color: black;"><img src="img/pocketflip.jpg" align="middle" style="width: 100px; height: 100px;">PocketFlip</p> 
 
<p align: left; style=" font-size: 25px; font-weight: bold; color: black;"><img src="img/pocketflip.jpg" align="middle" style="width: 100px; height: 100px;">PocketFlip</p><p align: left; style=" font-size: 25px; font-weight: bold; color: black;"><img src="img/pocketflip.jpg" align="middle" style="width: 100px; height: 100px;">PocketFlip</p> 
 

 
    </div>

Answer 2

刪除height:2000px;並添加height:auto;。它會解決你的身高問題。當您在其中添加新的div或p時，身高會增加。

.working{ 
 
    width: 600px; 
 
    height:auto; 
 
    background-color: #ECECEC; 
 
    border-style: ridge; 
 
    border-width: 5px; 
 
    overflow: hidden; 
 
}

<div class="working"> 
 

 

 

 
<p align: left; style="font-size: 25px; font-weight: bold; color: #39F51B; display: block;"> <img src="img/shopify.jpg" align="middle" style="width: 100px; height: 100px;"> 
 
Shopify dropshipping</p> 
 

 
<p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/code.png" align="middle" style="width: 100px; height: 100px;"> 
 
    Coding </p> 
 

 
<p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/ads.jpg" align="middle" style="width: 100px; height: 100px;"> 
 
    Advertisement </p> 
 
<p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/amazon.png" align="middle" style="width: 100px; height: 100px;"> 
 
    Amazon Mechanical Turk </p> 
 
<p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/fiverr.png" align="middle" style="width: 100px; height: 100px;"> 
 
    Fiverr </p> 
 
<p align: left; style="clear: left; display: block; font-size: 25px; font-weight: bold; color: black;"><img src="img/foap.jpg" align="middle" style="width: 100px; height: 100px;"> 
 
    Sell your photos </p> 
 
    <p align: left; style=" font-size: 25px; font-weight: bold; color: black;"><img src="img/pocketflip.jpg" align="middle" style="width: 100px; height: 100px;">PocketFlip</p> 
 
    <p align: left; style="font-size: 25px; font-weight: bold; color: #39F51B; display: block;"> <img src="img/shopify.jpg" align="middle" style="width: 100px; height: 100px;"> 
 
Testing 1</p> 
 
<p align: left; style="font-size: 25px; font-weight: bold; color: #39F51B; display: block;"> <img src="img/shopify.jpg" align="middle" style="width: 100px; height: 100px;"> 
 
Testing 2</p> 
 
    </div>