我曾多次使用float:右(或左)将图像和嵌入框浮动在容器顶部。现在，我需要浮动一个div到另一个div的右下角与正常的文本包装，你得到的浮动(文本包装上面和左边只有)。
我认为这一定是相对容易的，即使浮动没有底部值，但我还没有能够做到这一点使用一些技术和搜索网络还没有出现任何其他使用绝对定位，但这并没有给出正确的换行行为。
我原以为这是一种很常见的设计，但显然不是。如果没有人有建议，我将不得不把我的文本分解成单独的盒子，并手动对齐div，但这是相当不稳定的，我不想在每个需要它的页面上都这样做。
当前回答
虽然这很复杂，但这是可能的。我在最新的Firefox和谷歌Chrome浏览器上检查了这段代码。旧的浏览器可能不支持css的shape-outside属性。欲了解更多细节，请参阅此参考资料。
window.addEventListener('load', function() { var imageHolder = document.querySelector('.image-holder'); var containerHeight = document.querySelector('.container').offsetHeight; var imageHolderHeight = imageHolder.offsetHeight; var countPadding = containerHeight - imageHolderHeight; imageHolder.style.paddingTop = countPadding + 'px'; containerHeight = document.querySelector('.container').offsetHeight; var x1 = '0' + 'px ' + countPadding + 'px'; var x2 = imageHolder.offsetWidth + 'px' + ' ' + countPadding + 'px'; var x3 = imageHolder.offsetWidth + 'px' + ' ' + containerHeight + 'px'; var x4 = 0 + 'px' + ' ' + containerHeight + 'px'; var value = 'polygon(' + x1 + ',' + x2 + ',' + x3 + ',' + x4 + ')'; imageHolder.style.shapeOutside = value; }); .container { width: 300px; text-align: justify; border: 1px solid black; } .image-holder { float: right; } <div class='container' style=""> <div class='image-holder' style=''> <img class='bottom-right' style="width: 100px;" src="https://www.lwb.org.au/services/child-youth-and-family/static/b5cca79df7320248a77f6655a278190f/a6c62/img-index-banner.jpg" alt=""> </div> <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error quasi ut ipsam saepe, dignissimos, accusamus debitis ratione neque doloribus quis exercitationem iure! Harum quisquam ipsam velit distinctio tempora repudiandae eveniet.</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>
不确定，但之前发布的一个场景似乎可以工作，如果你在子div上使用position: relative而不是absolute。
#parent {
width: 780px;
height: 250px;
background: yellow;
border: solid 2px red;
}
#child {
position: relative;
height: 50px;
width: 780px;
top: 100%;
margin-top: -50px;
background: blue;
border: solid 2px green;
}
<div id="parent">
This has some text in it.
<div id="child">
This is just some text to show at the bottom of the page
</div>
</div>
而且没有桌子……!
我得到了这个工作在第一次尝试添加位置:绝对;底部:0;到CSS内部的div ID。我没有添加父样式的位置:relative;。
它在Firefox和IE 8中都很完美，还没有在IE 7中尝试过。
使用css的margin-top属性，目的是将页脚设置为容器的底部。并使用css text-align-last属性将页脚内容设置在中心。
<div class="container" style="margin-top: 700px; text-align-last: center; ">
<p>My footer Here</p>
</div>
A选择了@dave-kok这种方式。但只有当整个内容都适合而不需要滚动时，它才会起作用。如果有人能改进我将不胜感激
outer {
position: absolute;
bottom: 0;
width: 100%;
height: 100%;
}
.space {
float: right;
height: 75%;
}
.floateable {
width: 40%;
height: 25%;
float: right;
clear: right;
}
下面是代码http://jsfiddle.net/d9t9joh2/
