我曾多次使用float:右(或左)将图像和嵌入框浮动在容器顶部。现在，我需要浮动一个div到另一个div的右下角与正常的文本包装，你得到的浮动(文本包装上面和左边只有)。
我认为这一定是相对容易的，即使浮动没有底部值，但我还没有能够做到这一点使用一些技术和搜索网络还没有出现任何其他使用绝对定位，但这并没有给出正确的换行行为。
我原以为这是一种很常见的设计，但显然不是。如果没有人有建议，我将不得不把我的文本分解成单独的盒子，并手动对齐div，但这是相当不稳定的，我不想在每个需要它的页面上都这样做。
当前回答
我只需要做一个表格。
<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/
其他回答
您可以尝试使用宽度为1px的空元素并将其浮动。然后清除您实际想要定位的元素，并使用空元素的高度来控制它向下移动的距离。
http://codepen.io/cssgrid/pen/KNYrey/
.invisible {
float: left;
}
.bottom {
float: left;
padding-right: 35px;
padding-top: 30px;
clear: left;
}
在与各种技巧斗争了几天之后，我不得不说这似乎是不可能的。即使使用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.
我想我将不得不重新审视这个项目的设计目标，除非有人有最后的建议。
到目前为止，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; }
}
这将在页面底部放置一个固定的div，并在向下滚动时修复到页面底部
#div {
left: 0;
position: fixed;
text-align: center;
bottom: 0;
width: 100%;
}
目前这是不可能的。有不同的方法来解决将内容对齐到底边(flex, grid, table, absolute)。然而，这些方法不尊重float，因此内容不会围绕这些元素流动。
如果有一天浏览器和csswg对浮动元素的定义达成一致，那么在css中浮动元素就有可能实现。
先进的资源:
https://drafts.csswg.org/css-page-floats/#float-property
https://github.com/w3c/csswg-drafts/issues/1251
