如何获得一个div浮动到其容器的底部？ [英] How do I get a div to float to the bottom of its container?

问题描述

我已经浮动图像和插入框在容器的顶部使用float：right（或left）多次。最近我需要在另一个div的右下角浮动一个div，用正常的文本换行，你使用float（只在上面和左边包裹）。

I have floated images and inset boxes at the top of a container using float:right (or left) many times. Recently I hit a need to float a div at the bottom right corner of another div with the normal text wrap that you get with float (text wrapped above and to the left only).

我认为这必须是相对容易的，即使float没有底值，但我还没有能够使用一些技术，并搜索网络没有提出任何东西，除了使用绝对定位，但这个没有给出正确的换行行为。

I thought this must be relatively easy even though float has no bottom value but I haven't been able to do it using a number of techniques and searching the web hasn't come up with anything other than using absolute positioning but this doesn't give the correct word wrap behaviour.

我曾经认为这将是一个非常常见的设计，但显然不是。如果没有人有建议，我必须把我的文本分成单独的框，并手动对齐的div，但这是相当危险，我不喜欢在每一个需要它的页面。

I had thought this would be a very common design but apparently it isn't. If nobody has a suggestion I'll have to break my text up into separate boxes and align the div manually but that is rather precarious and I'd hate to have to do it on every page that needs it.

推荐答案

在使用各种技术努力了几天后，我不得不说这似乎是不可能的。即使使用javascript（我不想这样做）似乎不可能。

After struggling with various techniques for a couple of days I have to say that this appears to be impossible. Even using javascript (which I don't want to do) it doesn't seem possible.

为了澄清那些可能不明白的人 - 这是我的寻找：在出版它是相当普遍的布局插图（图片，表，图等），使其底部与文本的最后一行文本块（或页）的底部，文本流动以自然的方式在上方和右侧或左侧插入，取决于插页在页面的哪一侧。在html / css中，使用float style来将插入的顶部与块的顶部对齐是很平常的，但是令我惊讶的是，尽管它是一个常见的布局任务，但是看起来不可能排列文本和插入的底部。

To clarify for those who may not have understood - this is what I am looking for: in publishing it is quite common to layout an inset (picture, table, figure, etc.) so that its bottom lines up with the bottom of the last line of text of a block (or page) with text flowing around the inset in a natural manner above and to the right or left depending on which side of the page the inset is on. In html/css it is trivial to use the float style to line up the top of an inset with the top of a block but to my surprise it appears impossible to line up the bottom of the text and inset despite it being a common layout task.

我想我必须重温这个项目的设计目标，除非有最后一分钟的建议。

I guess I'll have to revisit the design goals for this item unless anyone has a last minute suggestion.

这篇关于如何获得一个div浮动到其容器的底部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！