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

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

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


当前回答

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

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

.invisible {
float: left;  
}

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

其他回答

不确定,但之前发布的一个场景似乎可以工作,如果你在子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>

而且没有桌子……!

让它起作用的方法如下:

像往常一样将元素向左浮动 使用旋转父div 180度 -moz-transform:旋转(180度); -webkit-transform:旋转(180度); -o-transform:旋转(180度); -ms-transform:旋转(180度); 过滤器:progid: DXImageTransform.Microsoft.BasicImage(旋转= 2); JSfiddle: http://jsfiddle.net/wcneY/ 现在将所有向左浮动的元素(给它们一个类)旋转180度,使它们再次平直。瞧!他们浮到水底。

如果你想要文本包装漂亮:-

.outer { 显示:表; } 在{ 身高:200 px; 显示:表格单元; vertical-align:底部; } /*仅用于样式*/ 在{ 背景:# eee; 填充:0 20px; } <!——需要两个父元素——> < div class = "外" > < div class = "内部" > < h3 >标题< / h3 > 示例看< p > < / p > < / 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;
}

很长一段时间以来,我也一直在寻找这个解决方案。 这是我得到的结果:

align-self: flex-end;

链接:https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ 但是,我不记得我是从哪里打开这个链接的。希望能有所帮助