Question

调整<p>标签的大小超出其父<div>的大小时，如何使它响应并保留在<div> HTML代码中，这正是我使用HTML和CSS实现的： / p>

<div class="text3">
  <div class="firstext">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel facilisis volutpat est velit egestas dui.
    </p>
  </div>
  <div class="secondtext">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel facilisis volutpat est velit egestas dui.
    </p> 
  </div>
  <img class="logo" src="/images/logo.png" alt="">
</div>

这是CSS代码：

.text3 {
  display: grid;
  grid-template-rows: 50% 50%;
}
.firstext {
    position: relative;
    width: 50%;
}
.firstext p {
    position: absolute;
    left: 35%;
    top: 20%;
    width: 50vh;
    height: auto;
}
.secondtext {
    position: relative;
    width: 50%;
}
.secondtext p {
    position: absolute;
    left: 35%;
    top: 20%;
}

Answer 1

问题出在绝对

在position: relative中，元素相对于自身定位。但是，绝对定位的元素是相对于其父元素的。

带有position: absolute的元素将从常规文档流中删除。它会自动定位到其父元素的起点（左上角）。如果没有任何父元素，则初始文档将为其父文档。

由于位置：绝对值会从文档流中删除该元素，因此其他元素会受到影响并表现为完全从网页中删除该元素。

查看更多信息 How to use the position property in CSS to align elements

Answer 2

如Temani Afif所述，绝对值实际上应仅保留给您的父div，在这种情况下为.text3

在以下代码笔中，我修改了您的CSS，我相信已经达到了您想要的结果：CodePen

 .text3 {
  display: grid;
  grid-template-rows: 50% 50%;
position: absolute;
}
.firstext {
    position: relative;
    width: 50%;
}
.firstext p {
    position: relative;
    left: 35%;
    top: 20%;
    width: 50vh;
    height: auto;
}
.secondtext {
    position: relative;
    width: 50%;
}
.secondtext p {
    position: relative;
    left: 35%;
    top: 20%;
}

如果这不是您想要的，那么使用flexbox也可以达到类似的结果。

 .text3 {
  display: flex;
flex-direction: column;
}

并从其他元素中删除显示样式

<p>标记突破了</p> <div>

2 个答案: