如何将容器定位在 <p> 元素内，文本在其周围流动？

Question

我想构建一个容器，其中包含文本，部分水平放置在父元素外部，完全放置在父元素内部，垂直将文本推开。是这样的： Quote positioned on left handside of text

为了推开文本，这个容器必须是浮动的，对吧？为了定位容器，我尝试了两种方法：

绝对定位（在相对定位的容器内）
相对定位。

问题：绝对定位会使浮动完全多余——容器不再将文本推开。并且通过相对定位，将文本推开的区域将保留在父元素的左上角。但我希望它 "follow" 文本框（再次请看上图）。我最接近我想要的是：

 .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 {
    /* relative positioning */
    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%);

    /* absolute positioning: to view activate .relativeposition as well */
    /*
    position: absolute;
    text-align: center;
    width: 200px;
    color: green;
    background-color: #ccc;
    float: left;
    top: 300px;
    left: 0%;
    transform: translate(-50%, -50%);
    */
    }

    .relativeposition {
    /*
    position: relative;
    */
    }

<div class="wrapperSingleProject">
    
 <div class="relativeposition">
  <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>
</div>

在原版 HTML+CSS 中这甚至可能吗？谢谢！

Answer 1

浮动 quote-div 元素并将其宽度设置为您希望引用段落的宽度的一半。将它设置为 position:relative 这样里面的文本就可以绝对定位了，但是正文仍然像预期的那样围绕着它。

.quote-div {
  position: relative;
  width: 100px;
  height: auto;
  float: left;
}

制作段落 position:absolute 并将其设置为 quote-div 容器宽度的两倍。仅将其固定到 quote-div 包装器的顶部和右侧，因此它突出左侧，并根据包含的文本具有自然高度。

.quote-div p {
  position: absolute;
  width: 200%; /* paragraph is twice as wide as its wrapper div */
  top: 0;
  right: 0;
}

最后，我用javascript找到了quote-div和包含的段落元素，并将div的高度设置为段落的高度。这就是无论引号中有多少文字，相对位置 quote-div 都能提供正确高度的原因。

// find the quote div element
const quoteDiv = document.querySelector('.quote-div');

if (quoteDiv) {
  // find the p inside
  const quoteDivP = quoteDiv.querySelector('p');
  // make the quote div height equal the height of the paragraph
  quoteDiv.style.height = quoteDivP.clientHeight + 'px';
}

.wrapperSingleProject {
  padding: 80px 0 80px 0;
  width: 400px; /* made the wrapper div smaller so can see the space on the left side here in the snippet display */
  margin: 0 auto; /* centers the wrapper div on the page */
  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 {
  position: relative;
  width: 100px;
  height: auto;
  float: left;
}

.quote-div p {
  margin: 0;
  padding: 10px;
  position: absolute;
  width: 200%; /* paragraph is twice as wide as its wrapper div */
  top: 0;
  right: 0;
  background-color: #eee;
  text-align: center;
  color: blue;
}

<div class="wrapperSingleProject">
  <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</p>

  <div class="relativeposition">
    <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>
</div>

Answer 2

一个非常简单的解决方案，在引用中只有负数 margin-left-div。

.wrapperSingleProject {
  padding: 80px 0 80px 0;
  width: 400px; /* made the wrapper div smaller so can see the space on the left side here in the snippet display */
  margin: 0 auto; /* centers the wrapper div on the page */
  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 {
  position: relative;
  width: 200px;
  margin-left: -100px;
  float: left;
}

.quote-div p {
  margin: 0;
  padding: 10px;
  background-color: #eee;
  text-align: center;
  color: blue;
}

<div class="wrapperSingleProject">
  <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</p>

  <div class="relativeposition">
    <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>
</div>

如何将容器定位在 <p> 元素内，文本在其周围流动？

How to position container inside <p> element w/ text flowing around it?

html

css

position

css-float