html – 将动态高度的块与动态高度的外部右下角对齐

概述是否有可能以任何方式将未知高度的未知高度与未知高度的未知高度对齐的文本块对齐？需要纯CSS.试图使用flexbox,float,绝对定位,但无法弄明白. 有一个漂亮的答案https://stackoverflow.com/a/18171538/4716464,但看起来太奇怪,可以在不同的浏览器中出错. Floating an image to the bottom right with text 是否有可能以任何方式将未知高度的未知高度与未知高度的未知高度对齐的文本块对齐？需要纯CSS.试图使用flexBox,float,绝对定位,但无法弄明白.

有一个漂亮的答案https://stackoverflow.com/a/18171538/4716464,但看起来太奇怪,可以在不同的浏览器中出错.

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

解决方法 这对你有用吗？你可以溢出隐藏父母,如果它可能小于孩子,以避免一个奇怪的视觉.

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

编辑：

所以,我完全错过了文字包装部分. This solution I whipped up in CodePen利用CSS3多列布局来实现您正在寻找的效果.调整机身尺寸以完全看到它.

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

另请注意,我在CodePen中使用了Autoprefixer,因此如果您没有将其作为构建步骤的一部分,则需要手动添加列数.有关多列的任何其他信息,请查看此CSS Tricks article.

来自CodePen：

<div >   ... Text ...   <div >     ... Another Text ...   </div></div>.parent {  background: red;  border: 3px solID #000;  column-count: 2;}.child {  background: orange;  border: 1px solID black;}

总结

以上是内存溢出为你收集整理的html – 将动态高度的块与动态高度的外部右下角对齐全部内容，希望文章能够帮你解决html – 将动态高度的块与动态高度的外部右下角对齐所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。