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

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

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


当前回答

目前这是不可能的。有不同的方法来解决将内容对齐到底边(flex, grid, table, absolute)。然而,这些方法不尊重float,因此内容不会围绕这些元素流动。

如果有一天浏览器和csswg对浮动元素的定义达成一致,那么在css中浮动元素就有可能实现。

先进的资源:

https://drafts.csswg.org/css-page-floats/#float-property

https://github.com/w3c/csswg-drafts/issues/1251

其他回答

这是现在可能的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 180度 -moz-transform:旋转(180度); -webkit-transform:旋转(180度); -o-transform:旋转(180度); -ms-transform:旋转(180度); 过滤器:progid: DXImageTransform.Microsoft.BasicImage(旋转= 2); JSfiddle: http://jsfiddle.net/wcneY/ 现在将所有向左浮动的元素(给它们一个类)旋转180度,使它们再次平直。瞧!他们浮到水底。

A选择了@dave-kok这种方式。但只有当整个内容都适合而不需要滚动时,它才会起作用。如果有人能改进我将不胜感激

outer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.space {
    float: right;
    height: 75%;  
}
.floateable {
    width: 40%;
    height: 25%;
    float: right;
    clear: right;  
 }

下面是代码http://jsfiddle.net/d9t9joh2/

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

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

position: absolute; 
bottom: 0;

...就这样了。