为什么我的<div>检测不到我<p>的一部分？

Question

我放了一个<div>标签，在里面放了一张图像、h3和p，但由于某种原因，div只检测到里面的图像和h3(我试图给div添加背景色，这有助于显示我的<p>在div之外)

这是我的代码：

<div class="middlesection">
<p id="perfect"> THE PERFECT ICE CREAM FOR EVERY OCCASION</p>  
<div id="product1">
<img id="firsticecream" src="/Users/andygiovannyfebrianto/Desktop/First Page/images/product/1.png">
<h3 class="learn-more">Learn More ></h3>
<p class="textdesc">Mint ice cream on top of strawberry <br> Perfect for a hot day!</p>
</div>
<div id="product2">
<img id="secondicecream" src="/Users/andygiovannyfebrianto/Desktop/First Page/images/product/2.png">
<h3 class="learn-more">Learn More ></h3>
<p class="textdesc">Strawberry ice cream with a whip of cream <br> Perfect balance!</p>
</div> 
<div id="product3">
<img id="thirdicecream" src="/Users/andygiovannyfebrianto/Desktop/First Page/images/product/3.png">
<h3 class="learn-more">Learn More ></h3>
<p class="textdesc">Strawberry ice cream on a stick<br> So refreshing!</p>
</div>              
</div>

Answer 1

您实际上在第一个<p id="perfect"> THE PERFECT ICE CREAM FOR EVERY OCCASION</p>顶部缺少一个div

试试下面的：

div {
background-color:yellow;
}

<div>
<p id="perfect"> THE PERFECT ICE CREAM FOR EVERY OCCASION</p>  
<div id="product1">
<img id="firsticecream" src="/Users/andygiovannyfebrianto/Desktop/First Page/images/product/1.png">
<h3 class="learn-more">Learn More ></h3>
<p class="textdesc">Mint ice cream on top of strawberry <br> Perfect for a hot day!</p>
</div>
<div id="product2">
<img id="secondicecream" src="/Users/andygiovannyfebrianto/Desktop/First Page/images/product/2.png">
<h3 class="learn-more">Learn More ></h3>
<p class="textdesc">Strawberry ice cream with a whip of cream <br> Perfect balance!</p>
</div> 
<div id="product3">
<img id="thirdicecream" src="/Users/andygiovannyfebrianto/Desktop/First Page/images/product/3.png">
<h3 class="learn-more">Learn More ></h3>
<p class="textdesc">Strawberry ice cream on a stick<br> So refreshing!</p>
</div>              
</div>

Answer 2

问题是您没有使用HTML实体。尝试关闭img和br标记，并将'>'字符替换为HTML实体。试试这个HTML代码。

<div>
<p id="perfect"> THE PERFECT ICE CREAM FOR EVERY OCCASION</p>
<div id="product1">
<img id="firsticecream" src="/Users/andygiovannyfebrianto/Desktop/First Page/images/product/1.png"/>
<h3 class="learn-more">Learn More &gt;</h3>
<p class="textdesc">Mint ice cream on top of strawberry <br/> Perfect for a hot day!</p>
</div>
<div id="product2">
<img id="secondicecream" src="/Users/andygiovannyfebrianto/Desktop/First Page/images/product/2.png"/>
<h3 class="learn-more">Learn More &gt;</h3>
<p class="textdesc">Strawberry ice cream with a whip of cream <br/> Perfect balance!</p>
</div>
<div id="product3">
<img id="thirdicecream" src="/Users/andygiovannyfebrianto/Desktop/First Page/images/product/3.png"/>
<h3 class="learn-more">Learn More &gt;</h3>
<p class="textdesc">Strawberry ice cream on a stick<br/> So refreshing!</p>
</div>
</div>