69

每次我尝试在 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 |
------------------

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

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

4

8 回答 8

33

在 (2003)、(2002)或(2005) 之前，似乎确实有人问过它

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

但是，它与发现的其他建议是一致的

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

或者这个：

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

无论如何，正如在这个线程中讨论的那样，没有简单的解决方案......

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

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

然而，Chadwick Meyer在他的回答中提出了一个基于 :beforeCSS 选择器的解决方案（Leonard的回答的变体）。
它在这里工作。

2021 年 4 月更新：Temani Afif在他的回答中建议使用 exbox 与外部形状相结合。
但是请务必查看Flexbox 的向后兼容性，尽管所有浏览器对它的支持都非常好。

于 2009-02-01T00:29:28.493 回答
16

嗯......这是一个很老的帖子，但我很努力并通过一个小解决方法摆脱了这个问题。我需要将图像向右对齐，并且距离顶部正好 170 像素。并且需要文本在图像的顶部、左侧和底部流动。所以我所做的是创建一个宽度为 0 像素、高度为 170 像素并向右浮动的对象。然后 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

工作得很好:)

于 2011-08-23T22:37:27.717 回答
8

将 flexbox 与 shape-outside 技巧结合使用，现在只需几行代码即可。

.wrapper {
  display: flex; /* this is needed for the height:100% */
}

.box {
  text-align: justify;
  font-size: 20px;
}

.float {
  float: right; /* shape-outside only apply to float elements */
  height: 100%; /* take all the height */
  margin-left: 15px;
  /* push the image to the bottom */
  display: flex;
  align-items: flex-end;
  /**/
  shape-outside: inset(calc(100% - 100px) 0 0); /* make the text flow on the top free space*/
}
<div class="wrapper">
  <div class="box">
    <div class="float"><img src="https://picsum.photos/id/1069/100/100"></div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in dui quis orci ultricies aliquet nec sed enim. Mauris id rutrum nulla, et ornare leo. Donec aliquet malesuada tellus, eu laoreet lectus tincidunt ut. Quisque lacus magna, interdum eu urna
    ac, aliquet gravida orci. Pellentesque gravida urna sit amet nulla suscipit, at venenatis lorem dignissim. Morbi quis nunc eu velit condimentum ornare. Curabitur finibus tincidunt ullamcorper. Pellentesque tincidunt et odio vitae tempus. Praesent
    ac erat ut eros venenatis pulvinar. Pellentesque eu dapibus dui. Ut semper sed enim ut vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae elit eget velit porttitor consequat nec sed turpis. Proin libero nisl, egestas
    hendrerit vulputate et, lobortis non nulla. Aenean dui libero, dictum vel nibh eget, tristique egestas enim.
  </div>
</div>

这是我围绕这个主题写的一篇文章，其中包含更多示例：https ://css-tricks.com/float-an-element-to-the-bottom-corner/

于 2021-04-20T14:20:28.760 回答
1

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

这是我的 CSS

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

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

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

于 2015-01-07T09:59:09.160 回答
0

除了发布的解决方案之外，我还使用了一个快速的 JQuery hack 来动态调整推送器的高度，方法是将我想要右下角对齐的区域的高度与内容区域的高度分开，并将其应用于推动器 div，如下所示：

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

它需要一些细微的调整，但通常效果与您将获得的一样好！

于 2012-02-10T12:34:07.757 回答
0

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

于 2016-03-11T14:19:06.080 回答
-1

我找到的解决方案涉及您有一个宽度不变的 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>
于 2009-02-01T00:29:00.803 回答
-2

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

img.right {
     float: right;
}

现在您所要做的就是将它设置在您想要换行的文本内。文本将浮动到文本的末尾，因此它将始终将文本推向左侧，但是如果您将图像放在文本的中间，例如...

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

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

干杯。

于 2010-07-10T23:04:15.293 回答