Question

我在测试网页上遇到了一个问题我正在创建练习，其中我有两个div元素一个在另一个之上，但是最重要的一个（CSS中的.item）是在研磨和＆＃39; ＃39;底部的一个（.wide中的.wide和.img-span）并且出于某种原因在另一侧伸出。我已经摆弄了我的CSS和HTML一段时间，我无法解决它。

CSS：

.item {
    padding-left: 20%;
    padding-right: 20%;
    padding-top: 4px;
    padding-bottom: 4px;
    overflow: hidden;
    margin: 0;
}

.item p {
    font-size: 18px;
}

.img-span {
    padding: 0;
    margin: 0;
    width: 100%;
}

.wide {
    width: 100%;
    height: 100%;
    opacity: 1;
    overflow: hidden;
}

HTML：

<div id="first" class="item">
        <p class="para">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime distinctio sed officia, nam iure quam necessitatibus nobis non, aut quaerat autem. Quam mollitia, fugiat amet veritatis, voluptate earum quidem et! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci ex earum impedit ipsum consequatur dolor doloremque eum. Sed fugit dolor maiores pariatur nesciunt iste cupiditate consequuntur, dolore alias numquam voluptatum!
        </p>
   </div>
   <div id="img-span">
       <img src="img/board-911636.jpg" class="wide">
   </div>

Answer 1

在display: block上设置img可以解决您的问题。

HTML div＆＃39; underlapping＆＃39;它下面的div

1 个答案: