文本环绕绝对定位的 div

发布于 2024-10-13 08:13:34 字数 1276 浏览 6 评论 0原文

我知道有一些关于类似主题的问题，但它们主要涉及浮动 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 主题，所以这些代码都不是我的，只是在放置图片时它不能完全工作。

原文

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's picture" title="neatktp'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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

溺ぐ爱和你が 2024-10-20 08:13:34

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

I know this is an older question but I came across it looking to do what I believe you were trying to. I've made a solution using the :before CSS selector, so it's not great with ie6-7 but everywhere else you should be good.

Basically, putting my image in a div I can then add a long thing float block before hand to bump it down and the text wraps merrily around it!

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

}

You can check it out here:

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

回复收藏 0 原文

羁绊已千年 2024-10-20 08:13:34

绝对定位使元素脱离正常的文档流，因此它不会与其他元素交互。也许你应该重新审视如何使用 float 来定位它，如果你遇到困难，可以在 Stack Overflow 上询问:)

回复收藏 0 原文

━╋う一瞬間旳綻放 2024-10-20 08:13:34

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

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

回复收藏 0 原文

静谧 2024-10-20 08:13:34

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

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

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

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

希望这能解决问题:)

When you position a div absolutely, you're effectively taking it out of the document flow, so the other elements will act as if it's not there.

To get around this, you can instead use margins:

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

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

Hopefully that will do the trick :)

回复收藏 0 原文

生寂 2024-10-20 08:13:34

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

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

In my opinon, the "Absolute" trait is poorly named, because its position is actually relative to the first parent whos position is not static

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

回复收藏 0 原文

伴我心暖 2024-10-20 08:13:34

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

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

和CSS：

.clear
{clear:both;}

I think the best option is to add an additional div after the float content, but still inside the parent to clear previous styles.

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

And CSS:

.clear
{clear:both;}

回复收藏 0 原文

鯉魚旗 2024-10-20 08:13:34

我需要一个类似的解决方案来浮动一个拉出报价（不是图像），其中包含可变长度的文本。拉出引用需要插入到顶部的 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;
}

超文本标记语言

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

I needed a similar solution to float a pullout quote (not an image) which would have variable length text inside. The pullout quote needed to be inserted into the HTML at the top (outside the flow of the text) and float down into the content with text that wraps around it. Modifying Leonard's answer above, there is a really simple way to do this!

See Codepen for Working Example: 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>

回复收藏 0 原文

罪歌 2024-10-20 08:13:34

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

回复收藏 0 原文

维持三分热 2024-10-20 08:13:34

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

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

这是一个 JSFiddle 来准确显示我的意思： JSFiddle 的右定位高和低

注意：我添加了颜色仅用于效果。除了类名之外，subject-1 和 subject-2 div 在其他方面都是彼此的精确副本。

回复收藏 0 原文

奢望 2024-10-20 08:13:34

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

启用 Nowrap

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

There is an easy fix to this problem. It's using 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>

For example I was making a dropdown menu for a navigation so the setup I was using is

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

Image Examples

Without Nowrap enabled

With Nowrap enabled

Also if you still can't figure it out check out the dropdowns on bootstrap templates which you can google. Then find out how they work because they are using position absolute and getting the text to take up 100% width without wrapping the text.

回复收藏 0 原文

~没有更多了~