我曾多次使用float:右(或左)将图像和嵌入框浮动在容器顶部。现在,我需要浮动一个div到另一个div的右下角与正常的文本包装,你得到的浮动(文本包装上面和左边只有)。

我认为这一定是相对容易的,即使浮动没有底部值,但我还没有能够做到这一点使用一些技术和搜索网络还没有出现任何其他使用绝对定位,但这并没有给出正确的换行行为。

我原以为这是一种很常见的设计,但显然不是。如果没有人有建议,我将不得不把我的文本分解成单独的盒子,并手动对齐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>

其他回答

我已经在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中的文本。

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

position: absolute; 
bottom: 0;

...就这样了。

不确定,但之前发布的一个场景似乎可以工作,如果你在子div上使用position: relative而不是absolute。

#parent {
  width: 780px;
  height: 250px;
  background: yellow;
  border: solid 2px red;
}
#child {
  position: relative;
  height: 50px;
  width: 780px;
  top: 100%;
  margin-top: -50px;
  background: blue;
  border: solid 2px green;
}
<div id="parent">
    This has some text in it.

    <div id="child">
        This is just some text to show at the bottom of the page
    </div>
</div>

而且没有桌子……!

如果你将父元素设置为position:relative,你可以将子元素设置为底部设置位置:absolute;和底部:0;

#{外 宽度:10 em; 高度:10 em; 背景颜色:蓝色; 位置:相对; } #{内部 位置:绝对的; 底部:0; 背景颜色:白色; } < div id = "外" > < div id = "内部" > <标题> < / h1 >完成 < / div > < / div >

将div放在另一个div中,并设置父div的样式为position:relative;然后在子div上设置以下CSS属性:位置:绝对;底部:0;