很老的问题，但仍然…… 你可以像这样将一个div浮动到页面底部:

div{
  position: absolute; 
  height: 100px; 
  top: 100%; 
  margin-top:-100px; 
}

你可以看到奇迹发生的地方。我认为你可以做同样的浮动到一个父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 &lt;span&gt; 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>

虽然这很复杂，但这是可能的。我在最新的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>

以下是我的解决方案:

<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>

使用css的margin-top属性，目的是将页脚设置为容器的底部。并使用css text-align-last属性将页脚内容设置在中心。

 <div class="container" style="margin-top: 700px;  text-align-last: center; ">
      <p>My footer Here</p>  
 </div>