我曾多次使用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
另一种解决方案是明智地使用表和行span。通过设置前一行的所有表格单元格(除了主要内容外)为rowspan="2",您将始终在您的主表格单元格的底部获得一个单元格孔,您可以始终放置valign="bottom"。
您还可以将其高度设置为一行所需的最小值。这样,不管剩下的文本占据了多少空间,你总是会在底部看到你最喜欢的一行文本。
我尝试了所有的div答案,我无法让他们做我需要的。
<table>
<tr>
<td valign="top">
this is just some random text
<br> that should be a couple of lines long and
<br> is at the top of where we need the bottom tag line
</td>
<td rowspan="2">
this<br/>
this<br/>
this<br/>
this<br/>
this<br/>
this<br/>
this<br/>
this<br/>
this<br/>
this<br/>
this<br/>
is really<br/>
tall
</td>
</tr>
<tr>
<td valign="bottom">
now this is the tagline we need on the bottom
</td>
</tr>
</table>