CSS：用底部对齐的文本包装一个浮动的 div

Posted 2023-03-05

【中文标题】CSS：用底部对齐的文本包装一个浮动的 div

【英文标题】：CSS: wrapping a floated div with the bottom aligned text

【发布时间】：2017-01-23 08:16:55

【问题描述】：

黑色 div 是一个固定高度的容器。蓝色 div 应该在右上角。绿色文本必须尊重蓝色 div，但也应该与黑色 div 的底部对齐。这可能吗？

【问题讨论】：

我认为没有任何布局方法可以让您这样做。甚至 flexbox 都不会，因为它会覆盖浮动。

见 - jsfiddle.net/umf1mhk7

@Paulie_D，差不多，但是你小提琴中的子块应该向上，到父级的顶部。

这就是我要说的......这是不可能的。我只是在演示这样一个事实，即即使您可以将文本对齐到底部，也无法将浮动对齐到顶部。

你可能是对的，我也想了一天，没有想出任何解决方案。这就是为什么存在这个问题的原因，有时人们会提供真正有效的解决方案（例如that）。

【参考方案1】：

试试这个：

.green-txt


clear:both;