css - 移动段落内的浮动区域

Question

我想在一段中引用一段话

.

我觉得我的代码几乎就在那里，但我一直遇到这个问题：当将“top：250px”应用到“.quote-div p”以将其向下移动到段落中时，而不是跟随浮动区域（替换文本）停留在其父元素的左上角。
有谁知道解决这个问题的方法？这甚至可能吗？谢谢！

.wrapperSingleProject {
  padding: 80px 0 80px 0;
  width: 400px;
  margin: 0 auto;
  position: relative;
}

p {
  text-decoration: none;
  text-align: left;
  font-size: 17px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.45;
  color: black;
}

.quote-div p {
  position: relative;
  text-align: center;
  width: 200px;
  color: blue;
  background-color: #ccc;
  float: left;
  margin: 0 -100px 0 0;
  padding: 10px;
  top: 250px;
  left: 0%;
  transform: translate(-50%, -50%);
}

<div class="wrapperSingleProject">
  <div class="quote-div">
    <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
  </div>

  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
    et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
    sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
    sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
    no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>

标签： css

Answer 1

这可以通过shape-outside结合使用来实现float。更多示例：https ://dev.to/afif/float-to-the-bottom-corners-i8l

.wrapperSingleProject {
  width: 400px;
  margin: 0 auto;
}

p {
  font-size: 17px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.45;
}
.quote-div {
  float: left;
  padding-top:200px; /*Distance from top*/
  margin-right:10px;
  /* A rectangular shape offseted by 200px from the top*/
  shape-outside: polygon(0 200px,100% 200px, 100% 100%,0 100%);
}
.quote-div p {
  position: relative;
  text-align: center;
  width: 200px;
  color: blue;
  background-color: #ccc;
  margin:0;
  padding:5px;
  margin-left:-100px;
}

<div class="wrapperSingleProject">
  <div class="quote-div">
    <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
  </div>

  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
    et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
    </p>
</div>