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

Posted 2023-02-26

【中文标题】如何将容器定位在 <p> 元素内，文字在其周围流动？

【英文标题】：How to position container inside <p> element w/ text flowing around it?

【发布时间】：2019-08-07 14:16:52

【问题描述】：

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

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

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

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

 .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 中是否可行？ 谢谢！

【问题讨论】：

你可以检查这个 - css-tricks.com/almanac/properties/s/shape-outside

【参考方案1】：

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

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

【讨论】：

这与我的初始代码几乎相同。不过我想要的是：想象一下将您的代码放在上面并删除第一个

好吧，这听起来像是一个不同的要求。在这种情况下会研究 CSS 形状...我已经为您提供了原始问题的 2 种可行方法，我建议为此提出一个新问题。

对我来说这是同样的问题。但是谢谢你的帮助！我重新表述了这个问题（因为我觉得我在这里做得不好）并在这里再次发布：***.com/questions/57475639/…

【参考方案2】：

浮动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>

【讨论】：

BugsArePeopleToo，非常感谢您提供的代码和详尽的描述！我复制了您的代码并尝试了一段时间以使其运行。但是在我的两个浏览器（Firefox 和 Safari）中，我似乎无法让它工作。它看起来很像演示中的内容，只是引用不会取代复制文本。这可能只是我的一些愚蠢的错误，所以我会继续寻找。不过，我想排除一件事：我在 JS 中找到了这个表达式：$quoteDivP.clientHeightpx。这是否意味着它使用 jQuery？我还没有嵌入它...

不，那是纯 javascript 中的模板字符串……但我意识到这是 ES6 语法……将“$quoteDivP.clientHeightpx”替换为“quoteDivP.clientHeight + 'px'”。希望有帮助！我将在上面的代码中相应地更改它。

我并不是要成为一个痛苦的**，但我只是意识到您的代码不能解决我遇到的问题（或者至少我不认为？）。这个想法是让被替换的区域“跟随”引用，以便引用将被封装在复制文本中。就像我附加的img一样。我更新了问题和代码，以防您想再看一遍。感谢您迄今为止的麻烦。

我刚刚发布了一个新答案...不知道为什么我不认为首先提出这个建议。不需要 JS，只需要一些带有负值的 margin-left。