我曾多次使用float:右(或左)将图像和嵌入框浮动在容器顶部。现在，我需要浮动一个div到另一个div的右下角与正常的文本包装，你得到的浮动(文本包装上面和左边只有)。
我认为这一定是相对容易的，即使浮动没有底部值，但我还没有能够做到这一点使用一些技术和搜索网络还没有出现任何其他使用绝对定位，但这并没有给出正确的换行行为。
我原以为这是一种很常见的设计，但显然不是。如果没有人有建议，我将不得不把我的文本分解成单独的盒子，并手动对齐div，但这是相当不稳定的，我不想在每个需要它的页面上都这样做。
当前回答
我只需要做一个表格。
<div class="elastic">
<div class="elastic_col valign-bottom">
bottom-aligned content.
</div>
</div>
而CSS:
.elastic {
display: table;
}
.elastic_col {
display: table-cell;
}
.valign-bottom {
vertical-align: bottom;
}
看看它的实际应用: http://jsfiddle.net/mLphM/1/
其他回答
您可以尝试使用宽度为1px的空元素并将其浮动。然后清除您实际想要定位的元素，并使用空元素的高度来控制它向下移动的距离。
http://codepen.io/cssgrid/pen/KNYrey/
.invisible {
float: left;
}
.bottom {
float: left;
padding-right: 35px;
padding-top: 30px;
clear: left;
}
一种有趣的方法是将两个右浮动元素堆叠在一起。
<div>
<div style="float:right;height:200px;"></div>
<div style="float:right;clear:right;">Floated content</div>
<p>Other content</p>
</div>
唯一的问题是，这只适用于你知道盒子的高度。
要将任何元素放在其容器的底部，只需使用以下命令:
div {
position: absolute;
bottom: 0px;
}
虽然这很复杂，但这是可能的。我在最新的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>
让它起作用的方法如下:
像往常一样将元素向左浮动 使用旋转父div 180度 -moz-transform:旋转(180度); -webkit-transform:旋转(180度); -o-transform:旋转(180度); -ms-transform:旋转(180度); 过滤器:progid: DXImageTransform.Microsoft.BasicImage(旋转= 2); JSfiddle: http://jsfiddle.net/wcneY/ 现在将所有向左浮动的元素(给它们一个类)旋转180度，使它们再次平直。瞧!他们浮到水底。
