将具有动态高度的块与具有动态高度的外部右下角对齐答案

【问题标题】：Align a block with dynamic height to right bottom of outer with dynamic height将具有动态高度的块与具有动态高度的外部右下角对齐
【发布时间】：2015-07-17 21:47:43
【问题描述】：

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

有一个漂亮的答案https://stackoverflow.com/a/18171538/4716464，但看起来太奇怪了，在不同的浏览器中可能会出现错误。

Floating an image to the bottom right with text wrapping around 仅部分解决了我的问题，因为那里的主题启动器至少有一个已知大小的内部块，但在我的情况下，两者都是动态的，因此 calc (100% - 200px) 在我的情况下不起作用。

【问题讨论】：

这取决于，红色文本必须在一个元素中，还是可以分解为不同的元素？
CSS 还不能做到这一点。您当然可以定位元素，但无法让文本包裹 AFAIK。也就是说，CSS 形状提供了一个选项，但我认为它们还没有准备好部署。
我害怕纯 CSS 帮不了你。但是，橙色框的绝对定位以及红色框的右侧和底部填充将是一个安全的解决方案。
@AbdulAhmad 它可以在不同的元素中，但应该平滑地围绕橙色项目浮动，并且每个段落的高度可以动态变化。所以在这种情况下分成“上”和“左下”块是行不通的
另见 - stackoverflow.com/questions/19770925/…

标签： html css

【解决方案1】：

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

.parent {
  position: relative;
}

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

编辑：

所以，我完全错过了文本换行部分。 This solution I whipped up in CodePen 利用 CSS3 多列布局来实现您正在寻找的效果。调整身体大小以查看完整效果。

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

另外请注意，我在 CodePen 中使用 Autoprefixer，因此如果您在构建步骤中没有添加前缀 column-count，则需要手动添加前缀。查看此CSS Tricks article，了解有关多列的任何其他信息。

来自 CodePen：

<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;
}

【讨论】：

是的，我知道什么是绝对定位。但是文本浮动呢？ ;)
我完全错过了你原来问题的那一部分。定位对你没有帮助。让我考虑一下更新我的答案。
是的，这看起来也很不错，先生！可能想检查一下我的情况。