CSS

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主题，所以这些代码都不是我的，只是说它在那里放一张图片并不完全正常。

Answer 1

我知道这是一个较老的问题，但我发现它想要做我认为你想要的事情。我已经使用：在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

Answer 2

当你绝对定位一个div时，你实际上是从文档流中取出它，所以其他元素就好像它不存在一样。

要解决此问题，您可以使用边距：

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

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

希望能解决这个问题：）

Answer 3

绝对定位将元素从正常文档流中取出，因此它不会与其他元素交互。也许你应该使用float来改变如何定位它，如果你遇到困难，请在Stack Overflow上询问它：）

Answer 4

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

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

Answer 5

在我看来，“绝对”特质名称很差，因为它的位置实际上是相对于位置不是静态的第一个父元素

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

Answer 6

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

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

和CSS：

.clear
{clear:both;}

Answer 7

我需要一个类似的解决方案来浮起一个拉出引号（不是图像），该引号中将包含可变长度的文本。提取引号需要插入到顶部的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>

Answer 8

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

Answer 9

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

如果你有一个容器包含很多对象，并且你希望那个定位对象在某些情况下看起来很高，而在其他情况下降低（例如各种屏幕大小），那么只是对象的散布副本您的html中多次inline(-block)或float，然后 display:none 根据您需要的条件，您不希望看到的项目。< / p>

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

注意：我仅为效果添加了颜色。除了类名之外，subject-1和subject-2 div是彼此完全相同的副本。

Answer 10

可以轻松解决此问题。它使用的是white-space：nowrap;

<div class="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>

图片示例

Without Nowrap enabled

With Nowrap enabled

此外，如果您仍然无法弄清楚，请查看您可以谷歌的引导程序模板的下拉列表。然后找出它们是如何工作的，因为它们使用绝对位置并使文本占据100％宽度而不包装文本。

文本环绕绝对定位的div

10 个答案:

CSS

HTML