将具有动态高度的块与具有动态高度的外部的右底部对齐

Question

是否有可能以任何方式将具有未知高度的文本块与具有未知高度的父级的右底部对齐？需要纯 CSS。尝试使用 flexbox、float、absolute 定位，但无法弄清楚。

有一个漂亮的答案/sf/answers/1272007691/，但看起来太奇怪了，在不同的浏览器中可能会出错。

将带有文本环绕的图像浮动到右下角仅部分解决了我的问题，因为主题启动器至少有一个已知大小的内部块，但在我的情况下两者都是动态的，因此 calc (100% - 200px) 不起作用就我而言。

Answer 1

这对你有用吗？如果父级小于子级，则可以溢出隐藏父级，以避免出现奇怪的视觉效果。

.parent {
  position: relative;
}

.child {
  position: absolute;
  right: 0;
  bottom: 0;
}

编辑：

所以，我完全错过了文字换行部分。我在 CodePen 中提出的这个解决方案利用 CSS3 多列布局来实现您正在寻找的效果。调整身体大小以查看其完整效果。

Can I Use...说这应该适用于 IE10+ 和大多数移动浏览器。您没有指定什么浏览器，所以希望这能满足您的需求。

column-count另请注意，我在 CodePen 中使用 Autoprefixer，因此如果您没有将其作为构建步骤的一部分，则需要手动添加前缀。查看这篇CSS 技巧文章，了解有关多列的任何其他信息。

来自代码笔：

<div class="parent">
   ... Text ...
   <div class="child">
     ... Another Text ...
   </div>
</div>

.parent {
  background: red;
  border: 3px solid #000;
  column-count: 2;
}

.child {
  background: orange;
  border: 1px solid black;
}