如何让div浮动到其容器的底部？

Question

我使用float:right(或left)多次浮动容器顶部的图像和嵌入框.最近我需要在另一个div的右下角浮动一个div,使用float得到的正常文本换行(文本包含在上方和左侧).

我认为这必须相对容易,即使浮点数没有底价,但我无法使用多种技术来做到这一点并且搜索网络除了使用绝对定位之外没有其他任何东西但是这不是给出正确的自动换行为.

我以为这将是一个非常常见的设计,但显然它不是.如果没有人有任何建议,我将不得不将我的文本分成单独的框并手动对齐div,但这是相当不稳定的,我不想在每个需要它的页面上进行操作.

编辑:给来这里的人留言.上面作为重复链接的问题实际上并不重复.文本环绕inset元素的要求使它完全不同.事实上,这里对最高投票答案的回应清楚地表明为什么相关问题的答案作为对这个问题的回答是错误的.无论如何,这个问题似乎仍然没有一般解决方案,但是这里和链接问题中发布的一些解决方案可能适用于特定情况.

Answer 1

将父div设置为position: relative,然后将内部div设置为...

position: absolute; 
bottom: 0;

......然后你去:)

Answer 2

使其工作的方法如下:

• 像往常一样将元素浮动

• 使用将父div旋转180度

  -moz-transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
  -o-transform:rotate(180deg);
  -ms-transform:rotate(180deg);
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  

  JSfiddle:http://jsfiddle.net/wcneY/

• 现在将所有向左浮动的元素(给它们一个类)旋转180度,再将它们笔直放置.瞧!他们漂浮到底部.

Answer 3

经过几天的各种技术挣扎后,我不得不说这似乎是不可能的.即使使用javascript(我不想这样做)它似乎也不可能.

为了澄清那些可能没有理解的人 - 这就是我正在寻找的东西:在出版中,布局插图(图片,表格,图形等)以使其底部与最后一个底部对齐是很常见的块(或页面)的文本行,其中文本以自然的方式围绕插入物在上方和右侧或左侧流动,这取决于插入页面的哪一侧.在html/css中,使用浮动样式将嵌入的顶部与块的顶部对齐是微不足道的,但令我惊讶的是,尽管它是常见的布局任务,但似乎无法排列文本的底部和插入.

我想我必须重新审视这个项目的设计目标,除非有人有最后一分钟的建议.

Answer 4

我在JQuery中通过在右侧浮点上方放置零宽度支撑元素,然后根据父高度减去浮动子高度来调整支柱(或管道)的大小来实现此目的.

在js踢之前,我正在使用位置绝对方法,它可以工作,但允许后面的文本流.因此,我切换到静态位置以启用支柱方法.(标题是父元素,剪切是我想要右下角,管道是我的支柱)

$("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顺序中的文本.

Answer 5

这会在页面底部放置一个固定的div,并在向下滚动时固定到底部

#div {
    left: 0;
    position: fixed;
    text-align: center;
    bottom: 0;
    width: 100%;
}

Answer 6

将div放在另一个div中并将父div的样式设置为position:relative;Then然后在子div上设置以下CSS属性:position:absolute; bottom:0;

Answer 7

If you set the parent element as position:relative, you can set the child to the bottom setting position:absolute; and bottom:0;

#outer {
  width:10em;
  height:10em;
  background-color:blue;
  position:relative; 
}

#inner {
  position:absolute;
  bottom:0;
  background-color:white; 
}

<div id="outer">
  <div id="inner">
    <h1>done</h1>
  </div>
</div>