Div没有扩展图片

Question

好的，首先，我尝试了溢出：隐藏;但它没有用，所以基本上这就是我的div正在寻找但是当我添加更多图像时，div不会随之扩展。

div的样子   

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

因为你有一个固定的高度。 请尝试删除height:2000px。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>