我曾多次使用float:右(或左)将图像和嵌入框浮动在容器顶部。现在,我需要浮动一个div到另一个div的右下角与正常的文本包装,你得到的浮动(文本包装上面和左边只有)。
我认为这一定是相对容易的,即使浮动没有底部值,但我还没有能够做到这一点使用一些技术和搜索网络还没有出现任何其他使用绝对定位,但这并没有给出正确的换行行为。
我原以为这是一种很常见的设计,但显然不是。如果没有人有建议,我将不得不把我的文本分解成单独的盒子,并手动对齐div,但这是相当不稳定的,我不想在每个需要它的页面上都这样做。
试试这个CSS+Javascript解决方案。从右上方的浮动div开始,然后计算一个零宽度的div的高度,沿着右边缘将浮动div推到底部。这段代码可能需要一些调整来获得正确的高度。
<style>
#mainbox {border:4px solid red;width:500px;padding:10px;}
.rightpad {float:right;clear:right;padding:0;width:0;}
#floater {background-color:red;text-align:center;color:#FFF;width:300px;height:100px;float:right;margin-right:-10px;margin-top:10px;}
</style>
<script>
window.onload = function() {
var mmheight = document.getElementById("mainbox").clientHeight;
var ff = document.getElementById("floater");
var ffheight = ff.clientHeight;
var dd = document.createElement('div');
dd.className = "rightpad";
dd.style.height = (mmheight - ffheight - 20) * 1 + "px";
ff.parentNode.insertBefore(dd,ff);
}
</script>
<div id="mainbox">
<div id="floater" class="rightpad">123</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam posuere tellus et dolor vestibulum gravida. Donec vel nunc massa. Quisque quis varius libero. Fusce ut elementum magna. Praesent hendrerit diam sed velit rutrum mollis. Nunc pretium metus in tempus tempus. Quisque laoreet nibh eget volutpat dictum. Pellentesque libero ipsum, tristique et aliquam aliquam, accumsan sed sem. Phasellus facilisis sem eget mi tempus rhoncus.</p></div>
目前这是不可能的。有不同的方法来解决将内容对齐到底边(flex, grid, table, absolute)。然而,这些方法不尊重float,因此内容不会围绕这些元素流动。
如果有一天浏览器和csswg对浮动元素的定义达成一致,那么在css中浮动元素就有可能实现。
先进的资源:
https://drafts.csswg.org/css-page-floats/#float-property
https://github.com/w3c/csswg-drafts/issues/1251