我曾多次使用float:右(或左)将图像和嵌入框浮动在容器顶部。现在，我需要浮动一个div到另一个div的右下角与正常的文本包装，你得到的浮动(文本包装上面和左边只有)。
我认为这一定是相对容易的，即使浮动没有底部值，但我还没有能够做到这一点使用一些技术和搜索网络还没有出现任何其他使用绝对定位，但这并没有给出正确的换行行为。
我原以为这是一种很常见的设计，但显然不是。如果没有人有建议，我将不得不把我的文本分解成单独的盒子，并手动对齐div，但这是相当不稳定的，我不想在每个需要它的页面上都这样做。
当前回答
以下是正确的解决方案:
.toBottomRight
{
display:inline-block;
position:fixed;
left:100%;
top:100%;
transform: translate(-100%, -100%);
white-space:nowrap;
background:red;
}
<div class="toBottomRight">Bottom-Right</div>
jsfiddle: https://jsfiddle.net/NickU/2k85qzxv/9/
其他回答
让它起作用的方法如下:
像往常一样将元素向左浮动 使用旋转父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度，使它们再次平直。瞧!他们浮到水底。
如果你将父元素设置为position:relative，你可以将子元素设置为底部设置位置:absolute;和底部:0;
#{外 宽度:10 em; 高度:10 em; 背景颜色:蓝色; 位置:相对; ｝ #{内部 位置:绝对的; 底部:0; 背景颜色:白色; ｝ < div id = "外" > < div id = "内部" > <标题> < / h1 >完成 < / div > < / div >
到目前为止，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; }
}
如果你想要文本包装漂亮:-
.outer { 显示:表; ｝ 在{ 身高:200 px; 显示:表格单元; vertical-align:底部; ｝ /*仅用于样式*/ 在{ 背景:# eee; 填充:0 20px; ｝ <！——需要两个父元素——> < div class = "外" > < div class = "内部" > < h3 >标题< / h3 > 示例看< p > < / p > < / div > < / div >
很长一段时间以来，我也一直在寻找这个解决方案。 这是我得到的结果:
align-self: flex-end;
链接:https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ 但是，我不记得我是从哪里打开这个链接的。希望能有所帮助
