28

我知道有一些关于类似主题的问题，但它们大多相当于浮动 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 主题，所以这些代码都不是我的，只是在将图片放在那里时它没有完全工作。

4

10 回答 10

28

我知道这是一个较老的问题，但我发现它是为了做我相信你正在尝试做的事情。我已经使用 :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

于 2012-08-23T12:22:23.203 回答
5

绝对定位使元素脱离了正常的文档流，因此它不与其他元素交互。也许您应该修改如何使用 float 来定位它，如果您遇到困难，请在 Stack Overflow 上询问它:)

于 2009-12-16T16:43:44.300 回答
5

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

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

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

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

希望这能解决问题:)

于 2011-01-20T14:52:43.170 回答
4

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

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

于 2011-01-20T15:00:54.547 回答
3

在我看来，“绝对”特征的命名很糟糕，因为它的位置实际上是相对于位置不是静态的第一个父母

<div class="floated">
 <div style="position: relative;">
  <div class="AbsoluteContent">
    stuff
  </div>
 </div>
</div>
于 2011-01-20T14:53:53.533 回答
3

我认为最好的选择是在浮动内容之后添加一个额外的 div，但仍然在父级内部以清除以前的样式。

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

和 CSS：

.clear
{clear:both;}
于 2013-07-15T19:13:58.653 回答
2

我需要一个类似的解决方案来浮动一个内部有可变长度文本的引出引号（不是图像）。需要在顶部（文本流之外）将引出的引用插入到 HTML 中，并向下浮动到带有环绕它的文本的内容中。修改上面伦纳德的答案，有一个非常简单的方法可以做到这一点！

请参阅 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>
于 2019-02-19T11:31:19.383 回答
1

绝对定位不允许您换行。您必须使用浮动和使用边距或填充的位置。

于 2009-12-16T16:32:57.063 回答
0

这是一个可能对某些人有用的技巧：

如果您有一个装有很多对象的容器，并且您希望该定位的对象在某些情况下显得较高，而在其他情况下则较低（例如各种屏幕尺寸），那么只需将对象的副本多次散布在您的 html ，或者inline(-block)，或者 with float，然后display:none根据您需要的条件，您不想看到的项目。

这是一个 JSFiddle 来准确显示我的意思：JSFiddle of right position high and low

注意：我添加颜色只是为了效果。除了类名之外，subject-1 和 subject-2 div 是彼此的精确副本。

于 2015-11-25T06:13:49.680 回答
0

这个问题有一个简单的解决方法。它使用空格：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>

图像示例

未启用 Nowrap

启用 Nowrap

此外，如果您仍然无法弄清楚，请查看引导模板上的下拉菜单，您可以使用谷歌搜索。然后找出它们是如何工作的，因为它们使用绝对位置并让文本占据 100% 的宽度而不换行。

于 2017-05-02T09:49:49.113 回答