如何封装右下角的文本？ [英] How can I wrap text around a bottom-right div?

问题描述

我有一个内容div，包含一个460x160的图像。所有我想做的是将图片放在右下角，并在其周围放置我的文字。

 < div id =content> 
< img src =.../> 
文本文本文本文本文本文本... 
< / div> 
  

所以我想让它看起来像：

  ------------------ 
 |文本文本文本| 
 |文本文本文本| 
 |文本文本----- 
 |文本文本| | 
 ------------------ 
  

用左上角或右上角的图片做它是蛋糕：

  #contents img {float：right; } 
 
 ------------------ 
 |文本文本| | 
 |文本文本----- 
 |文本文本文本| 
 |文本文本文本| 
 ------------------ 
  

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

  #contents img {float：right; margin-top：90％} //真的需要是100％-160px 
 
 ------------------ 
 |文本文本| 
 |文本文本| 
 |文本文本----- 
 |文本文本| | 
 ------------------ 
  

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

  #contents {position ：相对; } 
 #contents img {position：absolute; right：0; bottom：0; } 
 
 -or- 
 
 //将img标签移动到html中的文本和：
 #contents img {float：right; margin-top：-160; } 
 
 ------------------ 
 |文本文本文本| 
 |文本文本文本| 
 |文本文本----- 
 |文本文本| te | 
 ------------------ 
  

那么我该如何实现呢？

解决方案

这似乎是被问过的 before（2003）和 before（2002）或 before（2005）

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

这是一致的，但找到其他建议

这样做的唯一方法是将浮动元素放在文本中间的某个位置。

或这一个：

它包括一个垂直的 元素（如img，但它可能更聪明，只使用一个空的div），然后浮动其下所需的对象，使用clear属性。这个方法的主要问题是你还需要知道有多少行文本。它使事情更容易，但是，可以明确地用javascript编码，只需要改变推的高度，容器的高度减去浮动的高度（假设你的容器是不固定/最小高度） 。

无论如何，在这个线程中讨论，没有容易的解决方案...

---

Cletus 在评论中提及此 thread from 2003 ，这再次表明它不容易实现的事实。

不过，它指的是 Eric Meyer的文章，它接近你想达到的效果。

通过理解浮动和正常流如何相互关联，以及理解如何使用清除来操纵浮动周围的正常流动，作者可以使用浮动作为一个非常强大布局工具。

因为浮点数本来不是用于布局，一些黑客可能需要使它们按照预期的方式工作。这可以涉及包含浮动，清除元素或两者的组合的浮动元素。

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

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.

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

解决方案

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

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

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

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

---

Cletus mentions 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.

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.

这篇关于如何封装右下角的文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！