我曾多次使用float:右(或左)将图像和嵌入框浮动在容器顶部。现在，我需要浮动一个div到另一个div的右下角与正常的文本包装，你得到的浮动(文本包装上面和左边只有)。
我认为这一定是相对容易的，即使浮动没有底部值，但我还没有能够做到这一点使用一些技术和搜索网络还没有出现任何其他使用绝对定位，但这并没有给出正确的换行行为。
我原以为这是一种很常见的设计，但显然不是。如果没有人有建议，我将不得不把我的文本分解成单独的盒子，并手动对齐div，但这是相当不稳定的，我不想在每个需要它的页面上都这样做。
当前回答
设置父div为position: relative，然后内部div为…
position: absolute;
bottom: 0;
.．.就这样了。
其他回答
不确定，但之前发布的一个场景似乎可以工作，如果你在子div上使用position: relative而不是absolute。
#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>
而且没有桌子……!
让它起作用的方法如下:
像往常一样将元素向左浮动 使用旋转父div 180度 -moz-transform:旋转(180度); -webkit-transform:旋转(180度); -o-transform:旋转(180度); -ms-transform:旋转(180度); 过滤器:progid: DXImageTransform.Microsoft.BasicImage(旋转= 2); JSfiddle: http://jsfiddle.net/wcneY/ 现在将所有向左浮动的元素(给它们一个类)旋转180度，使它们再次平直。瞧!他们浮到水底。
随着Flexbox的引入，这变得非常容易，不需要太多的黑客。align-self:子元素的flex-end将沿着交叉轴对齐。
.container {
display: flex;
}
.bottom {
align-self: flex-end;
}
<div class="container">
<div class="bottom">Bottom of the container</div>
</div>
输出:
.container { 显示:flex; /*材质设计阴影*/ 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); 身高:100 px; 宽度:175 px; 填充:10 px; 背景:# fff; 字体类型:Roboto; ｝ .bottom { align-self: flex-end; ｝ < div class = "容器" > <div class="bottom">容器底部</div> < / div >
我知道这些东西很旧了，但我最近遇到了这个问题。
使用绝对位置跳水的建议是非常愚蠢的，因为整个浮动的东西失去了绝对位置。
现在，我没有找到一个通用的解决方案，但在很多情况下，人们使用浮动div只是为了在一行中显示一些东西，比如一系列的span元素。你不能垂直对齐。
为了达到类似的效果，你可以这样做:不让div浮动，但设置它的display属性为inline-block。然后你可以按照自己的喜好垂直排列。你只需要设置父div属性vertical-align为顶部，底部，中间或基线
我希望这能帮助到一些人
如果你想要文本包装漂亮:-
.outer { 显示:表; ｝ 在{ 身高:200 px; 显示:表格单元; vertical-align:底部; ｝ /*仅用于样式*/ 在{ 背景:# eee; 填充:0 20px; ｝ <！——需要两个父元素——> < div class = "外" > < div class = "内部" > < h3 >标题< / h3 > 示例看< p > < / p > < / div > < / div >
