我如何让一个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> This text is supposed to wrap the time which always seats at the corner of this bubble. 13:55 </li> <li> Absolute positioning doesn't work because it doesn't care if the two pieces of text overlap. We want to float. 13:55 </li> <li> Easy, uh? 13:55 </li> <li> Well, not THAT easy 13:56 </li> <li> See? 13:56 </li> <li> The problem is, we can't tell the span to float to right AND bottom... 13:56 </li> <li> 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. 13:56 </li> <li> See? 13:56 13:56 </li> <li> Make the floated span invisible. 13:56 </li> <li> See? 13:56 13:56 </li> <li> The giant text here is to simulate images which are common in a typical chat app. Done! 13:56 13:56 </li> </ul>

2020-07-02 18:55:09

A选择了@dave-kok这种方式。但只有当整个内容都适合而不需要滚动时，它才会起作用。如果有人能改进我将不胜感激

outer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.space {
    float: right;
    height: 75%;  
}
.floateable {
    width: 40%;
    height: 25%;
    float: right;
    clear: right;  
 }

下面是代码http://jsfiddle.net/d9t9joh2/

2014-10-23 13:12:01

我已经在JQuery中实现了这一点，通过将一个零宽度的支柱元素放在浮动的右边，然后根据父高度减去浮动的子高度调整支柱(或管道)的大小。

在js开始之前，我使用的是绝对位置的方法，它可以工作，但允许文本流在后面。因此，我切换到静态位置以启用支柱方法。 (header是父元素，cutout是我想要的右下角，pipe是我的strut)

$("header .pipe").each(function(){
    $(this).next(".cutout").css("position","static");       
    $(this).height($(this).parent().height()-$(this).next(".cutout").height());                                                 
});

CSS

header{
    position: relative; 
}

header img.cutout{
    float:right;
    position:absolute;
    bottom:0;
    right:0;
    clear:right
}
header .pipe{
    width:0px; 
    float:right

}

管道必须排在第一位，然后是切口，然后是HTML中的文本。

2012-05-04 15:14:19

通过一些JavaScript，我成功地将一个浮动元素固定在它的容器底部——并且仍然让它在文本中浮动，这对于像shape-outside这样的事情非常有用。

被浮动的元素得到一个margin-top赋值，它等于它的容器，减去它自己的高度。这将保留浮动，将元素推到其容器的底边，并防止文本在元素下面流动。


const resizeObserver = new ResizeObserver(entries => {
  if(entries.length == 0) return;
  const entry = entries[0];
  if(!entry.contentRect) return;

  const containerHeight = entry.contentRect.height;
  const imgHeight = imgElem.height;
  const imgOffset = containerHeight - imgHeight;
  
  imgElem.style.marginTop = imgOffset + 'px';
});

const imgElem = document.querySelector('.image');
resizeObserver.observe(imgElem.parentElement);

工作示例:https://codepen.io/strarsis/pen/QWGXGVy

多亏了ResizeObserver和对JavaScript的广泛支持，这似乎是一个非常可靠的解决方案。

2021-03-19 12:24:10

浮动和绝对定位的组合对我来说很有用。我试图把消息的发送时间放在语音气泡的右下角。时间不应该与消息体重叠，除非真的有必要，否则它不会使气泡膨胀。

解决方案是这样的:

有两个跨度，文本完全相同; 一个漂浮着，但看不见; 另一个是绝对定位到角落;

不可见的浮动对象的目的是保证可见对象的空间。

.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> This text is supposed to wrap the time which always seats at the corner of this bubble. 13:55 </li> <li> Absolute positioning doesn't work because it doesn't care if the two pieces of text overlap. We want to float. 13:55 </li> <li> Easy, uh? 13:55 </li> <li> Well, not THAT easy 13:56 </li> <li> See? 13:56 </li> <li> The problem is, we can't tell the span to float to right AND bottom... 13:56 </li> <li> 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. 13:56 </li> <li> See? 13:56 13:56 </li> <li> Make the floated span invisible. 13:56 </li> <li> See? 13:56 13:56 </li> <li> The giant text here is to simulate images which are common in a typical chat app. Done! 13:56 13:56 </li> </ul>

2020-07-02 18:55:09

要将任何元素放在其容器的底部，只需使用以下命令:

div {
    position: absolute;
    bottom: 0px;
}

2013-03-10 14:59:15

我如何让一个div浮动到其容器的底部?

推荐文章

最新文章

标签