Question

我放了一个<div>标签，在里面我放了一个图像，h3和p，但由于某种原因，div只检测图像和h3内部（我试过为div添加背景颜色，这有助于显示我的<p>在div之外

这是我的代码：

＆＃13;

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

＆＃13;

Answer 1

您实际上错过了第一个<p id="perfect"> THE PERFECT ICE CREAM FOR EVERY OCCASION</p>

之上的div

尝试以下：

＆＃13;

div {
  background-color:yellow;
}

＆＃13;

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

＆＃13;

Answer 2

问题在于您不使用HTML实体。尝试关闭img和br标签并替换＆＃39;＆gt;＆＃39; 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>

为什么我的<div>没有检测到我的<p>作为其中的一部分？

2 个答案: