我曾多次使用float:右(或左)将图像和嵌入框浮动在容器顶部。现在，我需要浮动一个div到另一个div的右下角与正常的文本包装，你得到的浮动(文本包装上面和左边只有)。
我认为这一定是相对容易的，即使浮动没有底部值，但我还没有能够做到这一点使用一些技术和搜索网络还没有出现任何其他使用绝对定位，但这并没有给出正确的换行行为。
我原以为这是一种很常见的设计，但显然不是。如果没有人有建议，我将不得不把我的文本分解成单独的盒子，并手动对齐div，但这是相当不稳定的，我不想在每个需要它的页面上都这样做。
当前回答
您可以尝试使用宽度为1px的空元素并将其浮动。然后清除您实际想要定位的元素，并使用空元素的高度来控制它向下移动的距离。
http://codepen.io/cssgrid/pen/KNYrey/
.invisible {
float: left;
}
.bottom {
float: left;
padding-right: 35px;
padding-top: 30px;
clear: left;
}
其他回答
要将任何元素放在其容器的底部，只需使用以下命令:
div {
position: absolute;
bottom: 0px;
}
使用css的margin-top属性，目的是将页脚设置为容器的底部。并使用css text-align-last属性将页脚内容设置在中心。
<div class="container" style="margin-top: 700px; text-align-last: center; ">
<p>My footer Here</p>
</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>
If you're okay with only the bottom-most line of the text going to the side of the block (as opposed to completely around and underneath it, which you can't do without ending the block and starting a new one), it's not impossible to float a block to one of the bottom corners of a parent block. If you put some content in a paragraph tag within a block and want to float a link to the bottom right corner of the block, put the link within the paragraph block and set it to float: right, then put in a div tag with clear: both set just underneath the end of the paragraph tag. The last div is to make sure the parent tag surrounds the floated tags.
<div class="article" style="display: block;">
<h3>title</h3>
<p>
text content
<a href="#" style="display: block;float: right;">Read More</a>
</p>
<div style="clear: both;"></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.
我想我将不得不重新审视这个项目的设计目标，除非有人有最后的建议。
