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

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

我原以为这是一种很常见的设计,但显然不是。如果没有人有建议,我将不得不把我的文本分解成单独的盒子,并手动对齐div,但这是相当不稳定的,我不想在每个需要它的页面上都这样做。


当前回答

到目前为止,Stu的答案是最接近工作的,但它仍然没有考虑到外部div的高度可能会根据文本在其中的换行方式而改变的事实。因此,只重新定位内部div(通过改变“pipe”的高度)一次是不够的。这种改变必须发生在循环内部,因此您可以不断检查是否已经达到了正确的定位,并在需要时进行重新调整。

前面答案中的CSS仍然完全有效:

#outer {
    position: relative; 
}

#inner {
    float:right;
    position:absolute;
    bottom:0;
    right:0;
    clear:right
}

.pipe {
    width:0px; 
    float:right

}

然而,Javascript应该看起来更像这样:

var innerBottom;
var totalHeight;
var hadToReduce = false;
var i = 0;
jQuery("#inner").css("position","static");
while(true) {

    // Prevent endless loop
    i++;
    if (i > 5000) { break; }

    totalHeight = jQuery('#outer').outerHeight();
    innerBottom = jQuery("#inner").position().top + jQuery("#inner").outerHeight();
    if (innerBottom < totalHeight) {
        if (hadToReduce !== true) { 
            jQuery(".pipe").css('height', '' + (jQuery(".pipe").height() + 1) + 'px');
        } else { break; }
    } else if (innerBottom > totalHeight) {
        jQuery(".pipe").css('height', '' + (jQuery(".pipe").height() - 1) + 'px');
        hadToReduce = true;
    } else { break; }
}

其他回答

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

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

如果你需要相对对齐和DIV仍然不能给你你想要的,只是使用表格和设置valign = "bottom"在单元格你想要的内容对齐到底部。我知道这不是对你的问题的一个很好的回答,因为DIV应该取代表,但这是我最近对一个图像标题所做的,到目前为止它工作得完美无缺。

简单……在HTML文件....将“footer”(或你想要在底部的div)放在底部。所以不要这样做:

<div id="container">
    <div id="Header"></div>
    <div id="Footer"></div>
    <div id="Content"></div>
    <div id="Sidebar"></div>
</div>

这样做:(把页脚放在下面。)

<div id="container">
    <div id="Header"></div>
    <div id="Content"></div>
    <div id="Sidebar"></div>
    <div id="Footer"></div>
</div>

这样做之后,你可以打开css文件,让“边栏”浮动到左边。然后将content浮动到右边,然后将footer清除。

这应该有用。对我来说是这样。

我尝试了其中的几种方法,下面的方法对我来说很有效,所以如果其他方法都失败了,那就试试这个吧,因为它对我很有效。

<style>
  #footer {
    height:30px;
    margin: 0;
    clear: both;
    width:100%;
    position: relative;
    bottom:-10;
  }
</style>

<div id="footer" >Sportkin - the registry for sport</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 >