我曾多次使用float:右(或左)将图像和嵌入框浮动在容器顶部。现在，我需要浮动一个div到另一个div的右下角与正常的文本包装，你得到的浮动(文本包装上面和左边只有)。
我认为这一定是相对容易的，即使浮动没有底部值，但我还没有能够做到这一点使用一些技术和搜索网络还没有出现任何其他使用绝对定位，但这并没有给出正确的换行行为。
我原以为这是一种很常见的设计，但显然不是。如果没有人有建议，我将不得不把我的文本分解成单独的盒子，并手动对齐div，但这是相当不稳定的，我不想在每个需要它的页面上都这样做。
当前回答
我尝试了其中的几种方法，下面的方法对我来说很有效，所以如果其他方法都失败了，那就试试这个吧，因为它对我很有效。
<style>
#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
position: relative;
bottom:-10;
}
</style>
<div id="footer" >Sportkin - the registry for sport</div>
其他回答
浮动和绝对定位的组合对我来说很有用。我试图把消息的发送时间放在语音气泡的右下角。时间不应该与消息体重叠，除非真的有必要，否则它不会使气泡膨胀。
解决方案是这样的:
有两个跨度，文本完全相同; 一个漂浮着，但看不见; 另一个是绝对定位到角落;
不可见的浮动对象的目的是保证可见对象的空间。
.speech-bubble { font-size: 16px; max-width: 240px; margin: 10px; display: inline-block; background-color: #ccc; border-radius: 5px; padding: 5px; position: relative; } .inline-time { float: right; padding-left: 10px; color: red; } .giant-text { font-size: 36px; } .tremendous-giant-text { font-size: 72px; } .absolute-time { position: absolute; color: green; right: 5px; bottom: 5px; } .hidden { visibility: hidden; } <ul> <li> <span class='speech-bubble'> This text is supposed to wrap the time <span> which always seats at the corner of this bubble. <span class='inline-time'>13:55</span> </span> </li> <li> <span class='speech-bubble'> Absolute positioning doesn't work because it doesn't care if the two pieces of text overlap. We want to float. <span class='inline-time'>13:55</span> </span> </li> <li> <span class='speech-bubble'> Easy, uh? <span class='inline-time'>13:55</span> </span> </li> <li> <span class='speech-bubble'> Well, not <span class='giant-text'>THAT</span> easy <span class='inline-time'>13:56</span> </span> </li> <li> <span class='speech-bubble'> <span class='tremendous-giant-text'>See?</span> <span class='inline-time'>13:56</span> </span> </li> <li> <span class='speech-bubble'> The problem is, we can't tell the span to float to right AND bottom... <span class='inline-time'>13:56</span> </span> </li> <li> <span class='speech-bubble'> We can combinate float and absolute: use floated span to reserve space (the bubble will be inflated if necessary) so that the absoluted span is safe to go. <span class='inline-time'>13:56</span> </span> </li> <li> <span class='speech-bubble'> <span class='tremendous-giant-text'>See?</span> <span class='inline-time'>13:56</span> <span class='absolute-time'>13:56</span> </span> </li> <li> <span class='speech-bubble'> Make the floated span invisible. <span class='inline-time'>13:56</span> </span> </li> <li> <span class='speech-bubble'> <span class='tremendous-giant-text'>See?</span> <span class='inline-time hidden'>13:56</span> <span class='absolute-time'>13:56</span> </span> </li> <li> <span class='speech-bubble'> The giant text here is to simulate images which are common in a typical chat app. <span class='tremendous-giant-text'>Done!</span> <span class='inline-time hidden'>13:56</span> <span class='absolute-time'>13:56</span> </span> </li> </ul>
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>
目前这是不可能的。有不同的方法来解决将内容对齐到底边(flex, grid, table, absolute)。然而，这些方法不尊重float，因此内容不会围绕这些元素流动。
如果有一天浏览器和csswg对浮动元素的定义达成一致，那么在css中浮动元素就有可能实现。
先进的资源:
https://drafts.csswg.org/css-page-floats/#float-property
https://github.com/w3c/csswg-drafts/issues/1251
我只需要做一个表格。
<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/
另一种解决方案是明智地使用表和行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>
