当前位置: 首页 > 面试题库 >

环绕绝对位置div的文字环绕

仲孙诚
2023-03-14
问题内容

我知道有关类似主题的一些问题,但它们大部分相当于浮动div
/图像。我需要将图像(和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主题,所以这些代码都不是我的,只是在将图片放在那里时,它并没有完全起作用。


问题答案:

绝对定位使该元素脱离正常的文档流,因此它不会与其他元素交互。也许您应该改用float来放置它,然后在Stack Overflow上询问它是否卡住:)



 类似资料:
  • 问题内容: 每次我尝试在CSS中执行看似简单的操作时,它都不起作用。 我有一个包含460x160图片的内容div。我要做的就是将图像放置在右下角,然后将文字环绕起来。 所以我希望它看起来像: 用左上或右上的图像来做是蛋糕: 现在我如何将其推到最低点?到目前为止,我想出的最好的方法是: 在这种情况下,文本不会在空白处打印,因此图像上方有空白。 在这种情况下,文本将打印在图像上方或下方。 那么…我该怎

  • 我有一个引导网格设置,在网格的一个单元格内有一个div浮动在右边,宽度为250px;当然,单元格内的文本遵循浮动的div轮廓并环绕它;有时我会在文本中添加一些应该填充单元格的图像(100%的宽度,img响应类,就像bootstrap做的那样)。我如何能让图像停止在浮动div如果存在在它的侧面?在我的设置,图像填充宽度正确,如果浮动不存在(或图像开始在它下面),这是完全正确的,但如果图像开始在它旁边

  • 在编码和模板化中,我经常需要包装文本的某一部分。是否有任何快捷方式来包装当前选择,例如: 我在Mac和PC上使用PhpStorm 7。我发现了一些类似的东西,其中:< kbd > ctrl < kbd > alt < kbd > j 可以用html标签包装,但不能包装其他内容。另外,ctrl+alt+根据当前文件格式(php、twig、html、...)

  • 问题内容: 我有3个要素。 第一个更大(包装)并具有 第2个相对于第1个相对位置绝对定位(并包含在第1个中) 第3个包含在第2个中,并且也具有绝对定位。 为什么第3个位置相对于第2个绝对位置(这也是第1个位置的绝对位置)而不是相对位置的第一个位置? 因为3rd 是绝对定位到2nd的绝对定位。 问题答案: 因为就像重置孩子的相对位置一样。 这是无法解决的-如果您希望第三个相对于第一个绝对定位,则必须

  • 环绕型按钮,可以当做菜单。点击某个按钮,所有按钮会整体移动,被点击的按钮会移动到最顶端。     作者说:可以自行修改代码,但是使用必须实现这些:     CircularLayOutView *manger=[[CircularLayOutView alloc] init];      //manger.tager=self;      manger.MyDelegate=self;     

  • 搜索了几个星期的网页,但不能找到满足我所有需求的答案(只有部分),帮助是非常欢迎的。 我想要的和已经完成的: 符合普通HTML5和CSS 在文章中显示图像 图像必须有标题 标题必须位于图像下方 标题必须限制在图像的水平大小 标题可能长于一行,文本应换行到下一行(仍在图像大小范围内) 图像和标题必须作为一组向左或向右浮动(请考虑使用 ) 文章文本必须环绕图像和标题 图像大小不同(第一个图像为200p