Html 如何让 div 浮动到其容器的底部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/311990/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I get a div to float to the bottom of its container?
提问by Stephen Martin
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:right（或 left）在容器顶部浮动图像和插入框。最近，我遇到了需要在另一个 div 的右下角浮动一个 div ，并使用浮动获得的普通文本换行（文本仅在上方和左侧环绕）。
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.
我认为这一定是相对容易的，即使 float 没有底值，但我无法使用多种技术来做到这一点，并且除了使用绝对定位之外，在网络上搜索还没有提出任何其他方法，但这并没有给出正确的自动换行行为。
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.
我原以为这是一个非常常见的设计，但显然不是。如果没有人提出建议，我将不得不将我的文本分成单独的框并手动对齐 div，但这相当不稳定，我不想在需要它的每个页面上都这样做。
EDIT:Just a note for anyone who comes here. The question linked above as a duplicate is in fact not a duplicate. The requirement that text wrap around the inset element makes it completely different. In fact, the response to the top voted answer here makes it clear why the answer in the linked question is wrong as a response to this question. Anyway, there still doesn't appear to be a general solution to this problem but some of the solutions posted here and in the linked question may work for specific cases.
编辑：对于任何来到这里的人来说，这只是一个注释。上面链接为重复的问题实际上不是重复的。文本环绕 inset 元素的要求使其完全不同。事实上，这里对最高投票答案的回答清楚地说明了为什么链接问题中的答案作为对这个问题的回答是错误的。无论如何，似乎仍然没有解决此问题的通用解决方案，但此处和链接问题中发布的某些解决方案可能适用于特定情况。
采纳答案by Stephen Martin
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.
在与各种技术斗争了几天之后，我不得不说这似乎是不可能的。即使使用 javascript（我不想这样做）它似乎也不可能。
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.
为那些可能不理解的人澄清 - 这就是我正在寻找的：在出版中，布置插图（图片、表格、图形等）是很常见的，这样它的底部与最后一个的底部对齐块（或页面）的一行文本，文本以自然的方式围绕插图在上方和右侧或左侧流动，具体取决于插图位于页面的哪一侧。在 html/css 中，使用浮动样式将插入顶部与块顶部对齐是微不足道的，但令我惊讶的是，尽管这是一项常见的布局任务，但似乎不可能将文本底部和插入对齐.
I guess I'll have to revisit the design goals for this item unless anyone has a last minute suggestion.
我想我将不得不重新审视这个项目的设计目标，除非有人在最后一刻提出建议。
回答by Timothy Khouri
Set the parent div to position: relative, then the inner div to...
将父 div 设置为position: relative，然后将内部 div 设置为...
position: absolute;
bottom: 0;
...and there you go :)
......然后你去:)
回答by Tom Groentjes
A way to make it work is the following:
使其工作的一种方法如下：
- Float your elements left like normal
Rotate the parent div 180 degrees using
-moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg); -ms-transform:rotate(180deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);JSfiddle: http://jsfiddle.net/wcneY/
Now rotate all the elements that float left (give them a class) 180 degrees to put them straight again. Voila! they float to the bottom.
- 像往常一样浮动你的元素
使用 将父 div 旋转 180 度
-moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg); -ms-transform:rotate(180deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);JSfiddle：http: //jsfiddle.net/wcneY/
现在将所有向左浮动的元素（给它们一个类）旋转 180 度，使它们再次伸直。瞧！他们漂浮到底部。
回答by Stu
I have acheived this in JQuery by putting a zero width strut element above the float right, then sizing the strut (or pipe) according to parent height minus floated child's height.
我在 JQuery 中实现了这一点，方法是在浮动右侧上方放置一个零宽度的支柱元素，然后根据父级高度减去浮动子项的高度来调整支柱（或管道）的大小。
Before js kicks in I am using the position absolute approach, which works but allows text flow behind. Therefore I switch to position static to enable the strut approach. (header is the parent element, cutout is the one i want bottom right, and pipe is my strut)
在 js 开始之前，我使用的是绝对位置方法，该方法有效但允许文本流向后面。因此，我切换到静态位置以启用支柱方法。（header 是父元素，cutout 是我想要的右下角，pipe 是我的支柱）
$("header .pipe").each(function(){
$(this).next(".cutout").css("position","static");
$(this).height($(this).parent().height()-$(this).next(".cutout").height());
});
CSS
CSS
header{
position: relative;
}
header img.cutout{
float:right;
position:absolute;
bottom:0;
right:0;
clear:right
}
header .pipe{
width:0px;
float:right
}
The pipe must come 1st, then the cutout, then the text in the HTML order.
管道必须排在第一位，然后是切口，然后是 HTML 顺序中的文本。
回答by James L
This puts a fixed div at the bottom of the page and fixes to the bottom as you scroll down
这会在页面底部放置一个固定的 div 并在向下滚动时固定到底部
#div {
left: 0;
position: fixed;
text-align: center;
bottom: 0;
width: 100%;
}
回答by Yona
Put the div in another div and set the parent div's style to position:relative;Then on the child div set the following CSS properties: position:absolute; bottom:0;
将 div 放在另一个 div 中并将父 div 的样式设置为position:relative;然后在子 div 上设置以下 CSS 属性：position:absolute; bottom:0;
回答by CC.
If you're okay with only the bottom-most line of the text going to the side of the block (as opposed to completely around and underneath it, which you can't do without ending the block and starting a new one), it's not impossible to float a block to one of the bottom corners of a parent block. If you put some content in a paragraph tag within a block and want to float a link to the bottom right corner of the block, put the link within the paragraph block and set it to float: right, then put in a div tag with clear: both set just underneath the end of the paragraph tag. The last div is to make sure the parent tag surrounds the floated tags.
如果您只将文本的最底部一行移到块的一侧（而不是完全在它的周围和下方，如果不结束块并开始一个新的块就无法做到这一点），它是将块浮动到父块的底角之一并非不可能。如果你把一些内容放在一个块内的段落标签中，并希望将链接浮动到该块的右下角，请将链接放在段落块内并将其设置为 float: right，然后放入一个带有 clear 的 div 标签: 都设置在段落标签末尾的正下方。最后一个 div 是确保父标签包围浮动标签。
<div class="article" style="display: block;">
<h3>title</h3>
<p>
text content
<a href="#" style="display: block;float: right;">Read More</a>
</p>
<div style="clear: both;"></div>
</div>
回答by Filipe Pitacho
If you set the parent element as position:relative, you can set the child to the bottom setting position:absolute; and bottom:0;
如果将父元素设置为 position:relative，则可以将子元素设置为底部设置 position:absolute；和底部：0;
#outer {
width:10em;
height:10em;
background-color:blue;
position:relative;
}
#inner {
position:absolute;
bottom:0;
background-color:white;
}<div id="outer">
<div id="inner">
<h1>done</h1>
</div>
</div>
回答by Salman von Abbas
If you want the text to wrap nicely:-
如果您希望文本很好地换行：-
.outer {
display: table;
}
.inner {
height: 200px;
display: table-cell;
vertical-align: bottom;
}
/* Just for styling */
.inner {
background: #eee;
padding: 0 20px;
}<!-- Need two parent elements -->
<div class="outer">
<div class="inner">
<h3>Sample Heading</h3>
<p>Sample Paragragh</p>
</div>
</div>回答by countersweet
I know that this stuff is old, but I recently ran into this problem.
我知道这个东西很旧，但我最近遇到了这个问题。
use absolute position divsadvice is really silly, because the whole float thing kind of loses point with absolute positions..
使用绝对位置 divs建议真的很傻，因为整个浮动的东西有点失去绝对位置的点..
now, I did not find an universal solution, but in a lot of cases prople use floating divs just to display something in a row, like a series of span elements. and you can't vertically align that.
现在，我没有找到通用的解决方案，但在很多情况下，prople 使用浮动 div 只是为了连续显示某些内容，例如一系列 span 元素。你不能垂直对齐。
to achieve a similar effect you can do this: do not make the div float, but set it's display property to inline-block. then you can align it vertically however it pleases you. you just need to set parent's div property vertical-alignto either top, bottom, middleor baseline
要实现类似的效果，您可以这样做：不要使 div 浮动，而是将其显示属性设置为inline-block. 然后你可以垂直对齐它，但它会让你满意。您只需要将父级的 div 属性vertical-align设置为top, bottom,middle或baseline
i hope that helps someone
我希望能帮助某人
