我曾多次使用float:右(或左)将图像和嵌入框浮动在容器顶部。现在，我需要浮动一个div到另一个div的右下角与正常的文本包装，你得到的浮动(文本包装上面和左边只有)。
我认为这一定是相对容易的，即使浮动没有底部值，但我还没有能够做到这一点使用一些技术和搜索网络还没有出现任何其他使用绝对定位，但这并没有给出正确的换行行为。
我原以为这是一种很常见的设计，但显然不是。如果没有人有建议，我将不得不把我的文本分解成单独的盒子，并手动对齐div，但这是相当不稳定的，我不想在每个需要它的页面上都这样做。
当前回答
很长一段时间以来，我也一直在寻找这个解决方案。 这是我得到的结果:
align-self: flex-end;
链接:https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ 但是，我不记得我是从哪里打开这个链接的。希望能有所帮助
其他回答
以下是正确的解决方案:
.toBottomRight
{
display:inline-block;
position:fixed;
left:100%;
top:100%;
transform: translate(-100%, -100%);
white-space:nowrap;
background:red;
}
<div class="toBottomRight">Bottom-Right</div>
jsfiddle: https://jsfiddle.net/NickU/2k85qzxv/9/
这将在页面底部放置一个固定的div，并在向下滚动时修复到页面底部
#div {
left: 0;
position: fixed;
text-align: center;
bottom: 0;
width: 100%;
}
以下是我的解决方案:
<style>
.sidebar-left{float:left;width:200px}
.content-right{float:right;width:700px}
.footer{clear:both;position:relative;height:1px;width:900px}
.bottom-element{position:absolute;top:-200px;left:0;height:200px;}
</style>
<div class="sidebar-left"> <p>content...</p></div>
<div class="content-right"> <p>content content content content...</p></div>
<div class="footer">
<div class="bottom-element">bottom-element-in-sidebar</div>
</div>
一种有趣的方法是将两个右浮动元素堆叠在一起。
<div>
<div style="float:right;height:200px;"></div>
<div style="float:right;clear:right;">Floated content</div>
<p>Other content</p>
</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>
