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

时间:2019-04-15 22:06:36

标签: html css

调整<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%;
}

2 个答案:

答案 0 :(得分:0)

问题出在绝对

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

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

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

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

答案 1 :(得分:0)

如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;
}

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