我曾多次使用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>
其他回答
我只需要做一个表格。
<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/
将div放在另一个div中，并设置父div的样式为position:relative;然后在子div上设置以下CSS属性:位置:绝对;底部:0;
另一种解决方案是明智地使用表和行span。通过设置前一行的所有表格单元格(除了主要内容外)为rowspan="2"，您将始终在您的主表格单元格的底部获得一个单元格孔，您可以始终放置valign="bottom"。
您还可以将其高度设置为一行所需的最小值。这样，不管剩下的文本占据了多少空间，你总是会在底部看到你最喜欢的一行文本。
我尝试了所有的div答案，我无法让他们做我需要的。
<table>
<tr>
<td valign="top">
this is just some random text
<br> that should be a couple of lines long and
<br> is at the top of where we need the bottom tag line
</td>
<td rowspan="2">
this<br/>
this<br/>
this<br/>
this<br/>
this<br/>
this<br/>
this<br/>
this<br/>
this<br/>
this<br/>
this<br/>
is really<br/>
tall
</td>
</tr>
<tr>
<td valign="bottom">
now this is the tagline we need on the bottom
</td>
</tr>
</table>
使用css的margin-top属性，目的是将页脚设置为容器的底部。并使用css text-align-last属性将页脚内容设置在中心。
<div class="container" style="margin-top: 700px; text-align-last: center; ">
<p>My footer Here</p>
</div>
哦,年轻人…给你:
<div class="block">
<a href="#">Some Content with a very long description. Could be a Loren Ipsum or something like that.</a>
<span>
<span class="r-b">A right-bottom-block with some information</span>
</span>
<span class="clearfix"></span>
</div>
<style>
.block {
border: #000 solid 1px;
}
.r-b {
border: #f00 solid 1px;
background-color: fuchsia;
float: right;
width: 33%
}
.clearfix::after {
display: block;
clear: both;
content: "";
}
</style>
没有绝对的立场! 响应! 版的
