如何在右下角的div上环绕文字？

  • Z时代
  • 2024-01-10
  • 分类：问答

每次我尝试在CSS中执行看似简单的操作时，它都不起作用。

我有一个包含460x160图片的内容div。我要做的就是将图像放置在右下角，然后将文字环绕起来。

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

所以我希望它看起来像：

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

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

#contents img { float:right; }
------------------
| text text |    |
| text text -----|
| text text text |
| text text text |
------------------

现在我如何将其推到最低点？到目前为止，我想出的最好的方法是：

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

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

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

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

那么…我该怎么做呢？

回答：

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

或者这个：

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

。

无论如何，如本线程中所讨论的，没有简单的解决方案…

通过了解浮子和法线流之间的相互关系，以及了解如何使用清除来操纵浮子周围的法线流，作者可以将浮子用作非常强大的布局工具。

由于最初并不打算将浮点数用于布局，因此可能需要进行一些修改才能使其表现出预期的效果。这可能涉及包含浮点的浮点元素，“清除”元素或两者的组合。

以上是 如何在右下角的div上环绕文字？ 的全部内容， 来源链接： utcz.com/qa/423943.html

回到顶部