我曾多次使用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/
其他回答
通过一些JavaScript，我成功地将一个浮动元素固定在它的容器底部——并且仍然让它在文本中浮动，这对于像shape-outside这样的事情非常有用。
被浮动的元素得到一个margin-top赋值，它等于它的容器，减去它自己的高度。这将保留浮动，将元素推到其容器的底边，并防止文本在元素下面流动。
const resizeObserver = new ResizeObserver(entries => {
if(entries.length == 0) return;
const entry = entries[0];
if(!entry.contentRect) return;
const containerHeight = entry.contentRect.height;
const imgHeight = imgElem.height;
const imgOffset = containerHeight - imgHeight;
imgElem.style.marginTop = imgOffset + 'px';
});
const imgElem = document.querySelector('.image');
resizeObserver.observe(imgElem.parentElement);
工作示例:https://codepen.io/strarsis/pen/QWGXGVy
多亏了ResizeObserver和对JavaScript的广泛支持，这似乎是一个非常可靠的解决方案。
使用css的margin-top属性，目的是将页脚设置为容器的底部。并使用css text-align-last属性将页脚内容设置在中心。
<div class="container" style="margin-top: 700px; text-align-last: center; ">
<p>My footer Here</p>
</div>
如果你想要文本包装漂亮:-
.outer { 显示:表; ｝ 在{ 身高:200 px; 显示:表格单元; vertical-align:底部; ｝ /*仅用于样式*/ 在{ 背景:# eee; 填充:0 20px; ｝ <！——需要两个父元素——> < div class = "外" > < div class = "内部" > < h3 >标题< / h3 > 示例看< p > < / p > < / div > < / div >
在与各种技巧斗争了几天之后，我不得不说这似乎是不可能的。即使使用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.
我想我将不得不重新审视这个项目的设计目标，除非有人有最后的建议。
这将在页面底部放置一个固定的div，并在向下滚动时修复到页面底部
#div {
left: 0;
position: fixed;
text-align: center;
bottom: 0;
width: 100%;
}
