在段落内移动浮动区域 [英] Move floated area inside paragraph

问题描述

我想在一个段落内放置一个引号

I would like to have a quote positioned inside one paragraph

.

我觉得我的代码快要存在了，但我仍然遇到这个问题:在将"top:250px"应用于".quote-div p"时，将其向下移动到段落中，而不是跟随该区域浮动(用于替换文本)停留在其父元素的左上角.
有人知道解决此问题的方法吗?这有可能吗?谢谢！

I feel like my code is almost there yet I keep running into this problem: When applying a "top:250px" to ".quote-div p" to move it down into the paragraph, instead of following, the area that is floated (to displace text) stays at the top left corner of its parent element.
Does anyone know a way to fix this? Is this even possible? Thanks!

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

推荐答案

可以使用

This can be achieved using shape-outside combined with float. Float alone cannot achieve this:

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

这篇关于在段落内移动浮动区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！