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

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

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


当前回答

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

其他回答

您可以尝试使用宽度为1px的空元素并将其浮动。然后清除您实际想要定位的元素,并使用空元素的高度来控制它向下移动的距离。

http://codepen.io/cssgrid/pen/KNYrey/

.invisible {
float: left;  
}

.bottom {
float: left;
padding-right: 35px;
padding-top: 30px;
clear: left;
}

我知道这是一个非常古老的话题,但我仍然想回答。如果有人遵循下面的css和html,然后它的工作。子页脚div会像胶水一样粘在底部。

<style>
        #MainDiv
        {
            height: 300px;
            width: 300px;
            background-color: Red;
            position: relative;
        }

        #footerDiv
        {
            height: 50px;
            width: 300px;
            background-color: green;
            float: right;
            position: absolute;
            bottom: 0px;
        }
    </style>


<div id="MainDiv">
     <div id="footerDiv">
     </div>
</div>

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

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

我也尝试了之前发布的这个场景;

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

绝对定位在加载页面时将div固定在浏览器的最低部分,但当您向下滚动页面时,如果页面较长,它不会随您一起滚动。我改变了定位为相对,它的工作完美。div在加载时直接到底部,所以你不会看到它,直到你到达底部。

div {
      position: relative;
      height:100px; /* Or the height of your image */
      top: 100%;
      margin-top: -100px;
}

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

position: absolute; 
bottom: 0;

...就这样了。