我如何获得一个div浮动到其容器的底部？

我使用float：right（或left）多次浮动了容器顶部的图像和插入框。 最近我碰到一个需要漂浮在另一个div的右下angular的div与你用float获得的普通文本换行（文本只包含在上面，只在左侧）。

我认为这一定是相对容易的，即使float没有底价值，但我还没有能够使用一些技术做到这一点，searchnetworking还没有提出任何比绝对定位，但这不给出正确的文字包装行为。

我原以为这是一个非常常见的devise，但显然不是。 如果没有人有任何build议，我将不得不把我的文本分成不同的框，并手动alignment的div，但这是相当危险的，我讨厌必须在每个页面上都需要它。

编辑：任何人来到这里的笔记。 上面连接的问题实际上不是重复的。 embedded元素的文本要求使得它完全不同。 事实上，对这个问题答案最多的答案表明，为什么问题的答案是错误的，作为对这个问题的回答。 无论如何，这个问题似乎还没有一个通用的解决scheme，但是这里和链接问题中发布的一些解决scheme可能适用于特定情况。

Answer 1

设置父div的position: relative ，然后内部股利…

 position: absolute; bottom: 0; 

…在那里你去:)

Answer 2

一种使其工作的方法如下：

• 像平常一样浮动你的元素

• 使用旋转父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度，使他们再次笔直。 瞧！ 他们漂浮到底部。

Answer 3

经过几天的各种技术挣扎后，我不得不说，这似乎是不可能的。 即使使用JavaScript（我不想这样做）似乎不可能。

为了澄清那些可能没有理解的人 – 这就是我要找的东西：在出版中，布置一个插图（图片，表格，graphics等）以使其底部与最后的底部alignment是相当常见的一个块（或页面）的文本行，文本以自然的方式在插入点的左上方和右侧或左侧，取决于插页所在页面的哪一侧。 在html / css中，使用浮动样式来排列顶部的插入顶部是一件小事，但令我惊讶的是，尽pipe这是一个常见的布局任务，但似乎不可能排列文本的底部和插入。

我想我必须重新审视这个项目的devise目标，除非有最后一分钟的build议。

Answer 4

我已经在JQuery中通过在float右上方放置一个零宽度的strut元素，然后根据父高度减去浮动的孩子的高度来调整strut（或pipe道）的大小。

在js开始之前，我正在使用位置绝对方法，它可以工作，但允许文本stream向后面。 因此，我切换到静态位置以启用支撑方法。 （标题是父元素，剪切是我想要的右下angular，pipe是我的支柱）

 $("header .pipe").each(function(){ $(this).next(".cutout").css("position","static"); $(this).height($(this).parent().height()-$(this).next(".cutout").height()); }); 

CSS

 header{ position: relative; } header img.cutout{ float:right; position:absolute; bottom:0; right:0; clear:right } header .pipe{ width:0px; float:right } 

pipe道必须先到达，然后是剪切，然后是HTML顺序中的文本。

Answer 5

将div放在另一个div中，并将父div的style position:relative; 然后在子div上设置下面的CSS属性： position:absolute; bottom:0; position:absolute; bottom:0;

Answer 6

这会在页面底部放置一个固定的div，并在向下滚动时修复底部

 #div { left: 0; position: fixed; text-align: center; bottom: 0; width: 100%; } 

Answer 7

如果你没有问题，只有文本最底部的那一行进入块的一边（而不是完全在它的周围和底下，如果没有结束块并开始一个新块就不能做到）不是不可能将块浮动到父块的底部angular落之一。 如果你把一些内容放在一个块内的一个段落标签中，并且想要把一个链接浮到块的右下angular，把链接放在段落块内，并把它设置为float：right，然后把div标签放到clear ：都设置在段落标签的末尾。 最后一个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> 

Answer 8

我知道这东西已经老了，但是最近我遇到了这个问题。

使用绝对位置的build议确实很愚蠢，因为整个浮点事物都以绝对位置失去了点。

现在，我没有find一个通用的解决scheme，但在很多情况下，prople使用浮动div来显示连续的东西，就像一系列的span元素。 你不能垂直alignment。

要达到类似的效果，您可以这样做：不要使div浮动，但将它的display属性设置为inline-block 。 那么你可以垂直alignment，但它让你满意。 您只需要将父级的div属性vertical-align设置为top ， bottom ， middle或baseline

我希望能帮助别人

Answer 9

如果你想要文字很好的包装：

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

Answer 10

我也尝试过这种情况发布早些时候;

 div { position: absolute; height: 100px; top: 100%; margin-top:-100px; } 

加载页面时，绝对定位将div固定到浏览器的最低部分，但是如果页面更长时向下滚动，它将不会与您一起滚动。 我改变了定位是相对的，它是完美的。 这个div直接加载到底部，所以直到底部才能看到它。

 div { position: relative; height:100px; /* Or the height of your image */ top: 100%; margin-top: -100px; } 

Answer 11

我只是做一个表。

 <div class="elastic"> <div class="elastic_col valign-bottom"> bottom-aligned content. </div> </div> 

而CSS：

 .elastic { display: table; } .elastic_col { display: table-cell; } .valign-bottom { vertical-align: bottom; } 

看到它在行动：
http://jsfiddle.net/mLphM/1/

Answer 12

我尝试了几个这些技巧，下面的工作对我来说，所以如果一切都在这里，如果一切都失败了，那么试试这个，因为它为我工作:)。

 <style> #footer { height:30px; margin: 0; clear: both; width:100%; position: relative; bottom:-10; } </style> <div id="footer" >Sportkin - the registry for sport</div> 

Answer 13

Aselect了@ dave-kok的这种方法。 但是，只有在整个内容适合没有滚动的情况下才有效。 我很感激，如果有人会改善

 outer { position: absolute; bottom: 0; width: 100%; height: 100%; } .space { float: right; height: 75%; } .floateable { width: 40%; height: 25%; float: right; clear: right; } 

这里是代码http://jsfiddle.net/d9t9joh2/

Answer 14

随着Flexbox的推出，这已经变得相当容易，没有太多的黑客攻击。 align-self: flex-end在子元素上将沿着横轴alignment它。

 .container { display: flex; } .bottom { align-self: flex-end; } 

 <div class="container"> <div class="bottom">Bottom of the container</div> </div> 

输出：

 .container { display: flex; /* Material design shadow */ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); height: 100px; width: 175px; padding: 10px; background: #fff; font-family: Roboto; } .bottom { align-self: flex-end; } 

 <div class="container"> <div class="bottom">Bottom of the container</div> </div> 

Answer 15

不确定，但是如果您在子div上使用position：relative而不是absolute，则以前发布的scheme似乎可行。

 #parent { width: 780px; height: 250px; background: yellow; border: solid 2px red; } #child { position: relative; height: 50px; width: 780px; top: 100%; margin-top: -50px; background: blue; border: solid 2px green; } 

 <div id="parent"> This has some text in it. <div id="child"> This is just some text to show at the bottom of the page </div> </div> 

没有桌子…！

Answer 16

我也一直在找这个解决scheme。 这是我得到的：

align-self：flex-end;

链接： https ： //philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/但是，我不记得我从哪里打开这个链接。 希望它有帮助

Answer 17

很老的问题，但仍然…你可以漂浮到这个页面的底部的div：

 div{ position: absolute; height: 100px; top: 100%; margin-top:-100px; } 

你可以看到魔术发生在哪里。 我想你可以做同样的浮动到父div的底部。

Answer 18

如果你需要相对alignment，而DIV仍然没有给你想要的东西，只需要在表格中设置valign =“bottom”，你就可以将内容alignment到底部。 我知道这不是一个很好的回答你的问题，因为DIV应该replace表，但这是我最近不得不做的图像标题，迄今为止工作完美无瑕。

Answer 19

一个有趣的方法是将一些正确的浮动元素堆叠在一起。

 <div> <div style="float:right;height:200px;"></div> <div style="float:right;clear:right;">Floated content</div> <p>Other content</p> </div> 

唯一的问题是，这只有当你知道盒子的高度时才起作用。

Answer 20

Stu的答案到目前为止是最接近工作的，但是它仍然没有考虑到外部div的高度可能会改变的事实，这取决于文本在内部的包裹方式。 所以，重新定位内部div（通过改变“pipe道”的高度）只是一次就不够了。 这种变化必须发生在一个循环内部，所以你可以不断检查你是否已经达到了正确的位置，如果需要的话可以重新调整。

从以前的答案的CSS仍然是完全有效的：

 #outer { position: relative; } #inner { float:right; position:absolute; bottom:0; right:0; clear:right } .pipe { width:0px; float:right } 

但是，Javascript应该看起来更像这样：

 var innerBottom; var totalHeight; var hadToReduce = false; var i = 0; jQuery("#inner").css("position","static"); while(true) { // Prevent endless loop i++; if (i > 5000) { break; } totalHeight = jQuery('#outer').outerHeight(); innerBottom = jQuery("#inner").position().top + jQuery("#inner").outerHeight(); if (innerBottom < totalHeight) { if (hadToReduce !== true) { jQuery(".pipe").css('height', '' + (jQuery(".pipe").height() + 1) + 'px'); } else { break; } } else if (innerBottom > totalHeight) { jQuery(".pipe").css('height', '' + (jQuery(".pipe").height() - 1) + 'px'); hadToReduce = true; } else { break; } } 

Answer 21

我知道这是一个非常古老的线程，但我仍然想回答。 如果有人按照下面的CSS＆HTML然后它的作品。 儿童页脚div将像胶一样粘在底部。

 <style> #MainDiv { height: 300px; width: 300px; background-color: Red; position: relative; } #footerDiv { height: 50px; width: 300px; background-color: green; float: right; position: absolute; bottom: 0px; } </style> <div id="MainDiv"> <div id="footerDiv"> </div> </div> 

Answer 22

这是现在可以使用弹性盒。 只需将父div的“显示”设置为“flex”，并将“margin-top”属性设置为“auto”即可。 这不会扭曲div的任何属性。

 .parent { display: flex; height: 100px; border: solid 1px #0f0f0f; } .child { margin-top: auto; border: solid 1px #000; width: 40px; word-break: break-all; } 

 <div class=" parent"> <div class="child">I am at the bottom!</div> </div> 

Answer 23

如果将父元素设置为position：relative，则可以将子元素设置为bottom设置位置：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> 

Answer 24

您可以尝试使用1px宽的空元素并将其浮动。 然后清除你实际想要定位的元素，并使用空元素的高度来控制它到底有多远。

http://codepen.io/cssgrid/pen/KNYrey/

 .invisible { float: left; } .bottom { float: left; padding-right: 35px; padding-top: 30px; clear: left; } 

Answer 25

简单……在html文件中。右下angular有“footer”（或底部的div）。 所以不要这样做：

 <div id="container"> <div id="Header"></div> <div id="Footer"></div> <div id="Content"></div> <div id="Sidebar"></div> </div> 

做到这一点:(底下有脚注）

 <div id="container"> <div id="Header"></div> <div id="Content"></div> <div id="Sidebar"></div> <div id="Footer"></div> </div> 

这样做后，你可以去的CSS文件，并有“侧边栏”向左浮动。 然后有“内容”向右飘然后有“页脚”清除。

应该为我工作。

Answer 26

我得到这个工作的第一次尝试通过添加position:absolute; bottom:0; position:absolute; bottom:0; 到CSS里面的div ID。 我没有添加父风格的position:relative; 。

它在Firefox和IE 8中都工作得很完美，在IE 7中还没有尝试过。

Answer 27

另一个答案是明智地使用表格和rowspan。 通过将上一行（除主要内容之一）上的所有表格单元格设置为rowspan =“2”，您将始终在主表格单元格的底部获得一个单元格的洞，您始终可以将valign =“bottom”。

您也可以将其高度设置为一行所需的最小值。 因此，无论文本的其余部分占用多less空间，您都会始终将最喜欢的文本排列在底部。

我尝试了所有的分区答案，我无法让他们做我所需要的。

 <table> <tr> <td valign="top"> this is just some random text <br> that should be a couple of lines long and <br> is at the top of where we need the bottom tag line </td> <td rowspan="2"> this<br/> this<br/> this<br/> this<br/> this<br/> this<br/> this<br/> this<br/> this<br/> this<br/> this<br/> is really<br/> tall </td> </tr> <tr> <td valign="bottom"> now this is the tagline we need on the bottom </td> </tr> </table> 

Answer 28

这里是我的解决scheme：

 <style> .sidebar-left{float:left;width:200px} .content-right{float:right;width:700px} .footer{clear:both;position:relative;height:1px;width:900px} .bottom-element{position:absolute;top:-200px;left:0;height:200px;} </style> <div class="sidebar-left"> <p>content...</p></div> <div class="content-right"> <p>content content content content...</p></div> <div class="footer"> <div class="bottom-element">bottom-element-in-sidebar</div> </div> 

Answer 29

把任何元素放在容器的底部，只需使用这个：

 div { position: absolute; bottom: 0px; }