文本环绕绝对定位的 div [英] Text Wrapping around an absolute positioned div

问题描述

我知道有一些关于类似主题的问题，但它们主要是浮动 div/图像.我需要将图像(和 div)绝对定位(向右)，但我只希望文本围绕它流动.如果我浮动 div，它会起作用，但是我无法将它定位在我想要的位置.因为它是文字只是在图片后面流动.

 
<div class="图片"><a href="/user/1" title="查看用户个人资料."><img src="http://www.neatktp.com/sites/default/files/photos/BlankPortrait.jpg" alt="neatktp&#039;s 图片" title="neatktp&#039;s 图片"/></a></div><span class='print-link'></span><p>BlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlah.</p>< p为H. BlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlah</p为H.

是 HTML 的示例

CSS 是:

 .picture img {背景:#fff;边框:1px #ddd 实心；填充:2px；浮动:对；}.post .picture {显示:块；高度:自动；位置:绝对；右:-10px；顶部:-10px；宽度:自动；}.邮政 {边框:1px 实心 #FFF；边框底部:1px 实心 #e8ebec;填充:37px 22px 11px；位置:相对；z-索引:4；}

这是一个 Drupal 主题，所以这些代码都不是我的，只是在将图片放在那里时它不能完全工作.

解决方案

绝对定位使元素脱离了正常的文档流，因此它不与其他元素交互.也许你应该重新修改如何使用 float 来定位它，如果你卡住了，请在 Stack Overflow 上询问它:)

I know there are a few questions about similar topics but they mostly amount to floating the div/image. I need to have the image (and div) positioned absolutely (off to the right) but I simply want the text flow around it. It works if I float the div but then I can't position it where I want. As it is the text just flows behind the picture.

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

Is an example of the HTML

With the CSS being:

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

It's a Drupal theme so none of this code is mine, it's just that it's not fully working when it comes to putting a picture there.

解决方案

Absolute positioning takes the element out of the normal document flow, and therefore it does not interact with the other elements. Perhaps you should revist how to position it using float instead, and ask about it here on Stack Overflow if you get stuck :)

这篇关于文本环绕绝对定位的 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！