Html 如何在右下角的 div 周围环绕文本？

Question

提问by CodingWithSpike

Every time I try to do something seemingly-simple in CSS, it doesn't work.

每次我尝试在 CSS 中做一些看似简单的事情时，它都不起作用。

I have a content div that contains a 460x160 image. All I want to do is position the image at the bottom-right corner and wrap my text around it.

我有一个包含 460x160 图像的内容 div。我想要做的就是将图像放置在右下角并将我的文字环绕在它周围。

<div id="contents">
    <img src="..." />
    text text text text text text ...
</div>

So I want it to look like:

所以我希望它看起来像：

------------------
| text text text |
| text text text |
| text text -----|
| text text |    |
------------------

Doing it with a top-left or top-right image is cake:

用左上角或右上角的图像来做是蛋糕：

#contents img { float:right; }

------------------
| text text |    |
| text text -----|
| text text text |
| text text text |
------------------

Now how do I push that to the bottom? The best I've come up with so far are:

现在我如何把它推到底部？到目前为止，我想出的最好的是：

#contents img { float:right; margin-top: 90%} // really needs to be 100%-160px

------------------
| text text      |
| text text      |
| text text -----|
| text text |    |
------------------

In this case the text does not print in the margin, so there is white space above the image.

在这种情况下，文本不会打印在边距中，因此图像上方有空白。

#contents { position:relative; }
#contents img { position:absolute; right:0; bottom:0; }

-or-

// move the img tag under the text in the html and:
#contents img { float:right; margin-top:-160; }

------------------
| text text text |
| text text text |
| text text -----|
| text text | te |
------------------

In this case the text prints over or under the image.

在这种情况下，文本打印在图像上方或下方。

So... how can I accomplish this?

那么......我怎样才能做到这一点？

Answer 1

采纳答案by VonC

It sure seems to have been asked before (2003), and before (2002), or before (2005)

它肯定似乎已经问前（2003年），和之前（2002年），或之前（2005年）

The last link actually suggest a javascript-based solution, but for a fixed (i.e. non fluid) solution.

最后一个链接实际上建议了一个基于 javascript 的解决方案，但用于固定（即非流体）解决方案。

It is consistent however, with other advices found

然而，它与发现的其他建议一致

The only way to do that is to put the floated element somewhere in the middle of the text. It's impossible to get it perfect all of the time.

唯一的方法是将浮动元素放在文本中间的某个位置。不可能一直让它完美。

Or this one:

或者这个：

It consists of floating a vertical "pusher" element (such as img, but it's probably smarter to just use an empty div), then floating the desired object under it, using the clear property. The major problem with this method is you still have to know how many lines there are of text. It makes things MUCH easier though, and could definitely be coded with javascript, just need to change the height of the "pusher" to the height of the container minus the height of the float (assuming your container isn't fixed/min height).

它包括浮动一个垂直的“pusher”元素（例如 img，但使用空的 div 可能更聪明），然后使用 clear 属性将所需的对象浮动在其下方。这种方法的主要问题是您仍然必须知道有多少行文本。不过，它使事情变得容易得多，并且绝对可以用 javascript 编码，只需要将“推杆”的高度更改为容器的高度减去浮动的高度（假设您的容器不是固定的/最小高度） .

Anyway, as discussed in this thread, there is no easy solution...

无论如何，正如本主题中所讨论的，没有简单的解决方案......

Cletusmentions in the comments this thread from 2003, which states once again the fact it can not easily be achieved.
However, it does refer to this Eric Meyer's article, which comes close to the effect you want to achieve.

Cletus在2003 年的评论中提到了这个线程，它再次说明了它不容易实现的事实。
但是，它确实参考了Eric Meyer 的这篇文章，它与您想要达到的效果非常接近。

By understanding how floats and the normal flow relate to each other, and understanding how clearing can be used to manipulate the normal flow around floats, authors can employ floats as a very powerful layout tool.
Because floats were not originally intended to be used for layout, some hacks may be necessary to make them behave as intended. This can involve floating elements that contain floats, "clearing" elements, or a combination of both.

通过了解浮动和正常流如何相互关联，并了解如何使用清除来操纵浮动周围的正常流，作者可以将浮动用作非常强大的布局工具。
因为浮点数最初不是用于布局的，所以可能需要一些技巧来使它们按预期运行。这可能涉及包含浮动的浮动元素、“清除”元素或两者的组合。

Yet, Chadwick Meyersuggests in his answera solution based on the :beforeCSS selector(variation of Leonard's answer).
It does work here.

然而，查德威克梅耶在暗示他的回答基于该解决方案 :beforeCSS选择器（变化伦纳德的答案）。
它在这里工作。

Answer 2

回答by Mauricio Morales

Well... this is a pretty old post but I struggled and got away with this with a small workaround. I needed to have an image aligned to the right, and exactly 170px from the top. And need text to flow on top, left and bottom of image. So what I did is create a that is of 0px width, with 170px of height and float right. Then the img would float and clear right and voila!

嗯......这是一个很老的帖子，但我努力并通过一个小的解决方法摆脱了这个。我需要将图像向右对齐，并且距离顶部正好 170 像素。并且需要文字在图像的顶部、左侧和底部流动。所以我所做的是创建一个宽度为 0px、高度为 170px 并向右浮动的对象。然后 img 会浮动并清除，瞧！

<!-- I used CSS, but inline will serve well here -->
<div style="float: right; width: 0px; height: 170px"></div>
<div style="float: right; clear: right"><img src="..." /></div>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text

Worked pretty well :)

工作得很好:)

Answer 3

回答by Galimbek Sagidenov

The simplest solution i found is to wrap img inside a div element and then use padding-top and margin-bottom values to align it.

我找到的最简单的解决方案是将 img 包裹在 div 元素中，然后使用 padding-top 和 margin-bottom 值来对齐它。

This is my CSS

这是我的 CSS

.contentDiv  .bottomRight img{
  height: 130px;
  float:right;
  padding-top: 60px;
  margin-bottom: -10px;
  }

and here is the HTML

这是 HTML

<div class="contentDiv">
 <h1>If you are seeing this and reading it, then all is working well.</h1>
 <div class="bottomRight">
    <img class="bottomRight" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
 </div>
</div>

The reason padding and margin worked for me is because I use it inside the parent element "contentDiv" to auto adjust height of the div according to the content. Not sure if its of any use.

填充和边距对我有用的原因是我在父元素“contentDiv”中使用它来根据内容自动调整 div 的高度。不确定它是否有任何用处。

Answer 4

回答by user6050419

For a jQuery solution, try the lowFloat plugin created by gilly3: https://github.com/gilly3/lowFloat

对于 jQuery 解决方案，请尝试使用 Gilly3 创建的 lowFloat 插件：https: //github.com/gilly3/lowFloat

Answer 5

回答by Spikeh

Further to the solution posted, I've used a quick JQuery hack to dynamically adjust the height of the pusher, by taking the height of the area I wanted to bottom-right align away from the height of the content area, and applying it to the pusher div, as so:

进一步发布的解决方案，我使用了一个快速的 JQuery hack 来动态调整推杆的高度，通过获取我想要右下角对齐的区域的高度远离内容区域的高度，并将其应用于pusher div，如下所示：

$("#pusher").css("height", $("#content").height() - $("#contentToAlign").height() + 'px')

It needs a few slight tweaks, but generally works as well as you're going to get!

它需要一些细微的调整，但通常可以和您将获得的一样好用！

Answer 6

回答by user58670

The solution I found involves that you have a div whose width does not changes, nor does the amount of text. Then you can position the image inside the text and have it align=right. So if you have correct amount of text around it, then you you get the image on the right and at the bottom of the div.

我发现的解决方案涉及您有一个宽度不变的 div，文本量也不变。然后您可以将图像定位在文本内并使其对齐=右。因此，如果您周围有正确数量的文本，那么您将在 div 的右侧和底部获得图像。

    <style >
#contents{
    border: 2px solid red;
    background: #ddd;
    position: absolute;
    width:600px;
}



</style>
<div id="contents">
    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    
    text text text text text text ...    text text text text text text ...   
    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...
    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    
    text text text text text text ...    text text text text text text ...   
    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...
    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    
    text text text text text text ...    text text text text text text ...   
    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...
    text text text text text text ...    text text text text text text ...  <img src="http://daiphyer.com/images/daiphyerv6-sliced_02.png" ALIGN="RIGHT"/>
    text text text text text text ...    text text text text text text ...    text text text text text text ...    
    text text text text text text ...    text text text text text text ...   
    text text text text text text ...    text text text text text text ...   
    text text text text text text ...    text text text text text text ...    text text text text text text ...
     hey hey text text text text text text ...    text text text text text text ...    text text text text text text ...    
    text text text text text text ...    text text text text text text ...
</div>

Answer 7

回答by NullDivision

Ok. So I've actually had this same problem and at some point the answer hit me like Saturday night cheese cake. It's almost the same hit and miss effect that you have when you try to set text wrapping in Word.

好的。所以我实际上遇到了同样的问题，在某些时候，答案就像周六晚上的芝士蛋糕一样打动了我。当您尝试在 Word 中设置文本换行时，这几乎是相同的命中和未命中效果。

img.right {
     float: right;
}

Now all you have to do is just set it INSIDE the text where you want the lines to break. The text will float to the end of the text so it will always push the text to the left but if you put the image in the middle of the text like...

现在您所要做的就是将它设置在您希望断行的文本中。文本将浮动到文本的末尾，因此它总是将文本向左推，但是如果您将图像放在文本的中间，例如...

<p>This is some text <img src="example.jpg" class="right" /> and then add
some more text.</p>

the top part stays where it is and text is free to float above the image and the rest is pushed to the left of the image. It's a workaround but not nearly as tedious as using JS and if you use a WYSIWYG editor it's even easier. Come to think of it if you use a WYSIWYG editor it has that feature automatically. :P Problem solved.

顶部保持原样，文本可以自由浮动在图像上方，其余部分被推到图像的左侧。这是一种解决方法，但不像使用 JS 那样乏味，如果您使用 WYSIWYG 编辑器，那就更容易了。想一想，如果您使用 WYSIWYG 编辑器，它会自动具有该功能。:P 问题解决了。

Cheers.

干杯。

Html 如何在右下角的 div 周围环绕文本？

提问by CodingWithSpike

采纳答案by VonC

回答by Mauricio Morales

回答by Galimbek Sagidenov

回答by user6050419

回答by Spikeh

回答by user58670

回答by NullDivision

相关推荐

最近更新

标签

Html 如何在右下角的 div 周围环绕文本？

提问by CodingWithSpike

采纳答案by VonC

回答by Mauricio Morales

回答by Galimbek Sagidenov

回答by user6050419

回答by Spikeh

回答by user58670

回答by NullDivision

相关推荐

Html 溢出：末尾隐藏点

Html 使用 CSS 使 div 可垂直滚动

Html 可滚动div内的冻结表标题

如何使用 CSS 在 HTML 列表中强制水平滚动？

相关推荐

最近更新

标签