我曾多次使用float:右(或左)将图像和嵌入框浮动在容器顶部。现在,我需要浮动一个div到另一个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;
}

其他回答

我得到了这个工作在第一次尝试添加位置:绝对;底部:0;到CSS内部的div ID。我没有添加父样式的位置:relative;。

它在Firefox和IE 8中都很完美,还没有在IE 7中尝试过。

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

这是现在可能的flex box。 只需设置父div的“display”为“flex”,并设置“margin-top”属性为“auto”。 这不会扭曲两个div的任何属性。

.parent { 显示:flex; 身高:100 px; 边框:1px #0f0f0f; } .child { margin-top:汽车; 边框:实心1px #000; 宽度:40像素; 单词分割:打破所有; } <div class=" parent"> <div class="child">我在底部!< / div > < / div >

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

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

使用css的margin-top属性,目的是将页脚设置为容器的底部。并使用css text-align-last属性将页脚内容设置在中心。

 <div class="container" style="margin-top: 700px;  text-align-last: center; ">
      <p>My footer Here</p>  
 </div>