我曾多次使用float:右(或左)将图像和嵌入框浮动在容器顶部。现在，我需要浮动一个div到另一个div的右下角与正常的文本包装，你得到的浮动(文本包装上面和左边只有)。
我认为这一定是相对容易的，即使浮动没有底部值，但我还没有能够做到这一点使用一些技术和搜索网络还没有出现任何其他使用绝对定位，但这并没有给出正确的换行行为。
我原以为这是一种很常见的设计，但显然不是。如果没有人有建议，我将不得不把我的文本分解成单独的盒子，并手动对齐div，但这是相当不稳定的，我不想在每个需要它的页面上都这样做。
当前回答
我也尝试了之前发布的这个场景;
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;
}
其他回答
让它起作用的方法如下:
像往常一样将元素向左浮动 使用旋转父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度，使它们再次平直。瞧!他们浮到水底。
以下是我的解决方案:
<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>
很老的问题，但仍然…… 你可以像这样将一个div浮动到页面底部:
div{
position: absolute;
height: 100px;
top: 100%;
margin-top:-100px;
}
你可以看到奇迹发生的地方。我认为你可以做同样的浮动到一个父div的底部。
随着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上使用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>
而且没有桌子……!
