我曾多次使用float:右(或左)将图像和嵌入框浮动在容器顶部。现在，我需要浮动一个div到另一个div的右下角与正常的文本包装，你得到的浮动(文本包装上面和左边只有)。
我认为这一定是相对容易的，即使浮动没有底部值，但我还没有能够做到这一点使用一些技术和搜索网络还没有出现任何其他使用绝对定位，但这并没有给出正确的换行行为。
我原以为这是一种很常见的设计，但显然不是。如果没有人有建议，我将不得不把我的文本分解成单独的盒子，并手动对齐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>
其他回答
我得到了这个工作在第一次尝试添加位置:绝对;底部:0;到CSS内部的div ID。我没有添加父样式的位置:relative;。
它在Firefox和IE 8中都很完美，还没有在IE 7中尝试过。
这是现在可能的flex box。 只需设置父div的“display”为“flex”，并设置“margin-top”属性为“auto”。 这不会扭曲两个div的任何属性。
.parent { 显示:flex; 身高:100 px; 边框:1px #0f0f0f; ｝ .child { margin-top:汽车; 边框:实心1px #000; 宽度:40像素; 单词分割:打破所有; ｝ <div class=" parent"> <div class="child">我在底部!< / div > < / div >
随着Flexbox的引入，这变得非常容易，不需要太多的黑客。align-self:子元素的flex-end将沿着交叉轴对齐。
.container {
display: flex;
}
.bottom {
align-self: flex-end;
}
<div class="container">
<div class="bottom">Bottom of the container</div>
</div>
输出:
.container { 显示:flex; /*材质设计阴影*/ Box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14)， 0 3px 1px -2px rgba(0,0,0,0.2)， 0 1px 5px 0 rgba(0,0,0,0.12); 身高:100 px; 宽度:175 px; 填充:10 px; 背景:# fff; 字体类型:Roboto; ｝ .bottom { align-self: flex-end; ｝ < div class = "容器" > <div class="bottom">容器底部</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度，使它们再次平直。瞧!他们浮到水底。
使用css的margin-top属性，目的是将页脚设置为容器的底部。并使用css text-align-last属性将页脚内容设置在中心。
<div class="container" style="margin-top: 700px; text-align-last: center; ">
<p>My footer Here</p>
</div>
