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

是否可以以任何方式将预先高度未知的文本块与同样高度未知的父文本的右下角对齐？需要纯CSS。尝试使用flexbox、float、绝对定位，但无法解决此问题

有一个很好的答案，但看起来太奇怪了，在不同的浏览器中可能会出现问题

只部分解决了我的问题，因为topic starter至少有一个已知大小的内部块，但在我的例子中，这两个块都是动态的，所以calc（100%-200px）在我的例子中不起作用

---

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

.parent {
  position: relative;
}

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

---

编辑：

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

所以，我完全错过了文本包装部分。利用CSS3多列布局实现您想要的效果。调整主体尺寸，使其完全生效

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

还要注意的是，我在CodePen中使用的是Autoprefixer，因此如果构建步骤中没有设置前缀，则需要手动为

列计数设置前缀。有关多列的任何其他信息，请查看此

来自代码笔：

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


... 文本。。。
... 另一个文本。。。
.家长{
背景：红色；
边框：3倍实心#000；
列数：2；
}
.孩子{
背景：橙色；
边框：1px纯黑；
}
这取决于，红色文本必须在一个元素中，还是可以分解为不同的元素？CSS还不能这样做。您当然可以定位元素，但无法将文本包装为AIK。也就是说，CSS形状提供了一个选项，但我认为它们还没有准备好部署。我很惊讶纯CSS帮不了您。然而，橙色框的绝对位置和红色框的右侧和底部填充将是一个安全的解决方案。@AbdulAhmad它可以在不同的元素中，但应该平滑地围绕橙色项浮动，并且每个段落的高度可以动态变化。所以分为“上”和“左下”块在这种情况下不起作用。也请看这个-是的，我知道绝对定位是什么。但是文本浮动呢？；）我完全错过了你最初问题的那一部分。定位在这里对你没有帮助。让我想一想这个更新我的答案。是的，这看起来也不错，先生！我想把这件事和我的案子联系起来。