绕过绝对定位的div进行文本换行

Question

我知道有一些类似的问题，但它们大多都是漂浮div/image。 我需要将图像（和div）绝对定位（靠右），但我只是希望文本围绕它流动。 如果我浮动div，则可以使其正常工作，但是我无法将其放置在所需位置。 此时，文本只会在图片后面流动。

<div class="post">
    <div class="picture">
        <a href="/user/1" title="View user profile.">
            <img src="http://www.neatktp.com/sites/default/files/photos/BlankPortrait.jpg" alt="neatktp&#039;s picture" title="neatktp&#039;s picture"  />
        </a>
    </div>
    <span class='print-link'></span> 
    <p>BlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlah.</p>
    <p>BlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlah.</p>
</div>

这是HTML的一个例子

对应的CSS代码如下：

.picture img {
    background: #fff;
    border: 1px #ddd solid;
    padding: 2px;
    float: right;
}
    
.post .picture {
    display: block;
    height: auto;
    position: absolute;
    right: -10px;
    top: -10px;
    width: auto;
}

.post {
    border: 1px solid #FFF;
    border-bottom: 1px solid #e8ebec;
    padding: 37px 22px 11px;
    position: relative;
    z-index: 4;
}

这是一个Drupal主题，所以这些代码都不是我的，只是在放置图片方面存在一些问题。

- Paul Murphy

---

你能发布一下标记和CSS吗？ - Rodolfo Palma

Answer 1

我知道这是一个比较旧的问题，但我刚好看到它并想做你当时想做的事情。我使用了:before CSS选择器来创建一个解决方案，所以在ie6-7上可能效果不佳，但在其他地方应该没问题。

基本上，我将我的图片放在一个div中，然后添加一个长的浮动块作为前置元素，使其下移，这样文字就可以愉快地绕着它排列了！

img {
  float:right;  
  clear:both;
  width: 50% ;
  margin: 30px -50px 10px 10px ;
}
.rightimage:before {
  content: '' ;
  display:block;
  float: right;
  height: 200px;

}

您可以在这里查看它：

http://codepen.io/atomworks/pen/algcz

- Leonard

---

我刚在最新版本的Chrome，FF和Safari中快速测试了一下，它完全按照预期工作！我知道这必须是一个像这样的div解决方案，但你已经排除了所有的猜测。顺便说一句，尝试将两个右对齐的图像放在一起，目前产生了意想不到的结果... - Cyprus106

这是最好的答案。我花了几个小时寻找，直到我独立解决了它。但我希望我能先找到这个答案。 - Justin Putney

如果我没有错的话，这个代码不就和float:right一样吗？这个解决方案中并没有使用绝对定位。 - Sean_A91

因为它是position: absolute的一个很好的替代品，并且基本上允许原始问题所要求的。 - Joundill

这太棒了，而且完美运作。是的，这只是普通的浮动行为，但又怎样呢？它以最少的折腾达到了预期效果，并且在源CSS中可以立即阅读。 - aholub

Answer 2

绝对定位会使元素脱离正常文档流，因此它不会与其他元素交互。也许您应该考虑使用浮动来定位它，如果遇到困难可以在 Stack Overflow 上提问 :)

- akamike

---

如果使用负边距不起作用，我可能需要向你请教。谢谢。 - Paul Murphy

只是一则评论：我认为没有办法让文本绕过定位对象是很糟糕的，因为在包含大量对象的容器div中，根据屏幕大小不能将对象定位到极端位置的情况下，没有其他方法可以使用。除非通过使用position:absolute。在这种情况下，实施Java查询似乎是唯一的选择…在我看来，这是CSS3的不足之处… - Damian Green

Answer 3

当您将一个div绝对定位时，您实际上是将其从文档流中取出，因此其他元素将会像它不存在一样运作。

为了解决这个问题，您可以使用边距：

.myDivparent
{
   float: left;
   background: #f00;
}

.myDivhascontent
{
   margin-left: 10px; /*right, bottom, top, whichever you need*/
}

希望那能解决问题 :)

- Kyle

---

在我的情况下，使用Joomla编辑幻灯片模块很困难。谢谢Kyle :) - FDI

Answer 4

正如 @Kyle Sevenoaks 所提到的，您正在将绝对定位的内容从文档流中移除。

据我所知，唯一让父级 div 包含绝对定位内容的方法是使用 JavaScript 在每次更改时设置宽度和高度。

- jeroen

---

谢谢Jeroen，我如何找到没有样式高度的元素的高度？ - FDI

@FDI 我使用jQuery来制作我的幻灯片，代码如下：var height = $("slide_show_element").height();。该代码获取了您的内部元素的计算高度，然后可以将其应用于外部/浮动元素：$("floated_element").height(height);。 - jeroen

Answer 5

在我看来，“绝对定位”这个特性的命名并不恰当，因为它的位置实际上是相对于第一个父元素的位置而言的，如果该父元素的定位是静态的，则“绝对定位”的位置就会出现偏差。

<div class="floated">
 <div style="position: relative;">
  <div class="AbsoluteContent">
    stuff
  </div>
 </div>
</div>

- Matt

---

如果您想要得到一个具体的代码答案，您必须发布一些您正在使用的代码。 - Matt

你的想法非常清晰，我按照你描述的更改了代码，但是没有起作用，你测试过吗？如果你想看我的代码，请告诉我。非常感谢，Matt。 - FDI

Answer 6

我需要类似的解决方案来浮动一个“拉出引用”（不是图片），其中包含可变长度的文本。拉出引用需要在顶部（超出文本流）插入到HTML中，并向下浮动到文本周围。修改Leonard上面的答案，有一种非常简单的方法可以实现这一点！请参见Codepen的工作示例：https://codepen.io/chadwickmeyer/pen/gqqqNE

CSS

/* This creates a space to insert the pullout content into the flow of the text that follows */
.pulloutContainer:before {
  content: '' ;
  display:block;
  float: right;
  /* The height is essentially a "margin-top" to push the pullout Container down page */
  height: 200px;
}

.pulloutContainer q {
  float:left;  
  clear:both;
  /* This can be a set width or percent, if you want a pullout that floats left or right or full full width */
  width: 30%;
  /* Add padding as you see fit */
  padding: 50px 20px;
}

HTML

<div id="container">

  <div class="pulloutContainer">
      <!-- Pullout Container Automatically Adjusts Size -->
      <q>Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet.</q>
    </div>

    <div class="content">
       <h1>Sed Aucteor Neque</h1>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est.</

      ...INSERT MORE TEXT HERE...

  </div>
</div>

- Chadwick Meyer

Answer 7

我认为最好的选择是在浮动内容后添加一个附加的div，但仍在父元素内部以清除先前的样式。

<div class="clear"></div>

并且CSS：

.clear
{clear:both;}

- Chris G

Answer 8

绝对定位无法让文本环绕。您必须使用浮动并使用边距或填充来定位。

- iamtooamazing

---

希望这不是事实，因为我认为负边距可能会在其他浏览器中引起问题。谢谢回复。 - Paul Murphy

Answer 9

这个问题有一个简单的解决方法。就是使用 white-space: nowrap;

<div style="position:relative">
 <div style="position: absolute;top: 100%; left:0;">
  <div style="white-space:nowrap; width: 100%;">
    stuff
  </div>
 </div>
</div>

例如，我正在为导航制作一个下拉菜单，所以我使用的设置是：

<ul class="submenu" style="position:absolute; z-index:99;">
   <li style="width:100%; display:block;">
      <a href="#" style="display: block;width: 100%;white-space: nowrap;">Dropdown link here</a>
   </li>
<ul>

图像示例

未启用不换行

已启用不换行

如果你还是搞不明白，可以查看一下Bootstrap模板中的下拉菜单，你可以通过谷歌搜索找到。然后弄清楚它们是如何工作的，因为它们使用了绝对定位，并且让文本占据100%的宽度而不换行。

- user7479167

Answer 10

这里有一个可能适用的小技巧：

如果你有一个装满很多对象的容器，你想让某个定位对象在某些情况下出现在高处，在其他情况下则出现在较低位置（例如，不同的屏幕尺寸），那么只需在你的 HTML 中多次插入该对象的副本，可以使用 inline(-block) 或 float，然后根据需要的条件display:none 隐藏你不想看到的项。

这是一个 JSFiddle，以显示我所说的内容：JSFiddle of right positioning high and low

注意：我仅添加颜色以获得视觉效果。除了类名之外，subject-1 和 subject-2 divs 是完全相同的。

- Damian Green