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

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

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


当前回答

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

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

其他回答

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

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

.invisible {
float: left;  
}

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

我只需要做一个表格。

<div class="elastic">
  <div class="elastic_col valign-bottom">
    bottom-aligned content.
  </div>
</div>

而CSS:

.elastic {
  display: table;
}
.elastic_col {
  display: table-cell;
}
.valign-bottom {
  vertical-align: bottom;
}

看看它的实际应用: http://jsfiddle.net/mLphM/1/

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/

在与各种技巧斗争了几天之后,我不得不说这似乎是不可能的。即使使用javascript(我不想这样做),这似乎是不可能的。

To clarify for those who may not have understood - this is what I am looking for: in publishing it is quite common to layout an inset (picture, table, figure, etc.) so that its bottom lines up with the bottom of the last line of text of a block (or page) with text flowing around the inset in a natural manner above and to the right or left depending on which side of the page the inset is on. In html/css it is trivial to use the float style to line up the top of an inset with the top of a block but to my surprise it appears impossible to line up the bottom of the text and inset despite it being a common layout task.

我想我将不得不重新审视这个项目的设计目标,除非有人有最后的建议。

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