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

Question

是否有可能以任何方式将未知高度的未知高度与未知高度的未知高度的文本块对齐？需要纯CSS。试图使用flexbox，float，绝对定位，但无法弄明白。

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

Floating an image to the bottom right with text wrapping around只能部分解决我的问题，因为主题启动器至少有一个已知大小的内部块，但在我的情况下两者都是动态的，所以calc（100％ - 200px）在我的情况下不起作用

Answer 1

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

.parent {
  position: relative;
}

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

修改

所以，我完全错过了文字包装部分。 This solution I whipped up in CodePen利用CSS3多列布局来实现您正在寻找的效果。调整机身大小以使其完全有效。

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

另请注意，我在CodePen中使用自动修复程序，因此如果您没有在构建步骤中使用自动修复程序，则需要手动添加前缀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;
}