我曾多次使用float:右(或左)将图像和嵌入框浮动在容器顶部。现在，我需要浮动一个div到另一个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; }
}
其他回答
很老的问题，但仍然…… 你可以像这样将一个div浮动到页面底部:
div{
position: absolute;
height: 100px;
top: 100%;
margin-top:-100px;
}
你可以看到奇迹发生的地方。我认为你可以做同样的浮动到一个父div的底部。
这将在页面底部放置一个固定的div，并在向下滚动时修复到页面底部
#div {
left: 0;
position: fixed;
text-align: center;
bottom: 0;
width: 100%;
}
通过一些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的广泛支持，这似乎是一个非常可靠的解决方案。
以下是正确的解决方案:
.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/
简单……在HTML文件....将“footer”(或你想要在底部的div)放在底部。所以不要这样做:
<div id="container">
<div id="Header"></div>
<div id="Footer"></div>
<div id="Content"></div>
<div id="Sidebar"></div>
</div>
这样做:(把页脚放在下面。)
<div id="container">
<div id="Header"></div>
<div id="Content"></div>
<div id="Sidebar"></div>
<div id="Footer"></div>
</div>
这样做之后，你可以打开css文件，让“边栏”浮动到左边。然后将content浮动到右边，然后将footer清除。
这应该有用。对我来说是这样。
