Javascript 如何将文本与底部对齐，同时将css形状浮动到一侧，以便文本换行到形状？

我在

中有一些文本，它在

中。我有一个css图像形状浮动到一边。我希望上面两个框中的文本环绕到形状，但也与div的底部对齐。下面两个框工作正常，因为我不需要垂直对齐其中的文本。问题是，文本的长度和行数可能不同，所以我不能使用固定的高度。因此绝对定位将不起作用，加上文本将忽略我的浮动css图像形状

我已经阅读了几十个问题和答案，它们似乎都使用黑客。还有一个问题似乎和我的问题一样，但我再也找不到了，而且只有一个答案是基于javascript的。我尝试将FlexBox与

align items:flex end但这不适用于我的浮动形状。我还试着使用
表格
和
垂直对齐：底部但是我的文本只是打断到另一行，没有按照形状换行

我提出的一种解决方法是在文本上使用
padding top
，但不知道文本的高度意味着文本并不总是将其放置在div的底部，特别是当文本长度发生变化时

编辑：我完全接受任何新想法。这是我能想到的最好的方法。我甚至开始胡思乱想，在四个盒子中只使用一种形状。但这似乎是一个更大的挑战

编辑：我还更新了URL，以便您现在可以运行代码段

编辑：我已经决定使用Javascript，并且正在研究一个解决方案。我愿意接受任何想法

编辑：最让我困扰的是，我提出的每一个想法都需要大量的Javascript。在我看来，解决办法不应该是噩梦。CSS应该能够解决这个问题，但我似乎找不到没有Javascript的方法


div，img，p{
边际：0px；
边界：0px；
填充：0px；
}
#包装纸{
显示：块；
位置：绝对位置；
左：0px；
顶部：0px；
宽度：100%；
身高：100%；
}
.盒子{
显示：块；
位置：绝对位置；
宽度：50%；
身高：50%；
}
.box p{线高度：1.5em；填充：10px；}
/*图像形状为300px 300px。*/
/*我使用50vh，因为我希望形状大小始终为窗口高度的一半*/
/*这给人一种更大形状的错觉*/
.形状{
位置：相对位置；
形状边缘：2米；
宽度：50vh；
高度：50vh；
}
/*我的解决方案是#左上#p{右上{padding top:29vh；}*/
#上左{右：50%；上：0%；}
#左下{右：50%；上：50%；}
#右上{左：50%；右上：0%；}
#右下{左：50%；上：50%；}
#左上角p，#左下角p{text align:right；}
#右上角p，#右下角p{文本对齐：左；}
#左上角。形状{float:right；外部形状：url（'https://i.stack.imgur.com/B1Dzu.png'); }
#左下角。形状{float:right；外部形状：url（'https://i.stack.imgur.com/Vxmz0.png'); }
#右上角。形状{float:left；外部形状：url（'https://i.stack.imgur.com/UL8uT.png'); }
#右下角。形状{float:left；外部形状：url（'https://i.stack.imgur.com/EGBRz.png“）；}

这里有一些文字。这里有一些文字。这里有一些文字

这里有一些文字。这里有一些文字。这里有一些文字

这里有一些文字。这里有一些文字。这里有一些文字

这里有一些文字。这里有一些文字。这里有一些文字

您可能会达到的最佳效果是通过使用
外部形状
属性

查看一些文档

但是，请注意，从2019年起，这不受支持

一个足够简单的codepen示例是
您可能实现的最好方法是使用
shapeoutside
属性

查看一些文档

但是，请注意，从2019年起，这不受支持

一个足够简单的代码笔示例是
，这是我的Javascript解决方案。它需要一个冗长的脚本，所以我将直接进入解决方案的核心

解决办法
当我的CSS图像形状向右浮动时，我仍然可以得到包装文本，即使我希望文本与底部对齐。由于我所看到的任何工作规范都不允许我将文本垂直对齐到底部，并将其包装成CSS形状，因此我需要创建一个带有
填充顶部
的错觉。我通过Javascript中的一个循环运行一系列检查，解决了不知道文本高度的难题。只需检查文本的初始高度，然后添加一个增量
padding top
，然后与父容器的高度进行比较。重复此过程，直到文本高度达到或超过父容器高度。这里重要的一点是，每次添加
padding top
的增量时，都会更改文本的高度。添加的填充越多，文本越接近CSS形状，文本的包装和流动方式就越不同。这就是为什么我们需要检查每个增量的高度。因为我的文本的字体大小是以EM为单位的，所以我很难猜出它的计算高度。加上客户端缩放，这是一个数学噩梦！我们只是用一个增量检查，不需要数学运算，万岁

我的Javascript
这只是一个核心示例，不是完整的脚本，但您应该了解这个想法

var counter = 0 ;

function checkHeight()
{
var container = document.getElementById("top_left") ;
var text = document.getElementById("top_left_text") ;
var container_height = container.offsetHeight ;

counter++ ;
text.style.paddingTop = counter + "vh" ;
var text_height = text.offsetHeight ;
if ( text_height < container_height ) { checkHeight() ; }
}

var计数器=0；
函数checkHeight（）
{
var container=document.getElementById（“左上方”）；
var text=document.getElementById（“左上文本”）；
var container_height=container.offsetHeight；
计数器++；
text.style.paddingTop=计数器+“vh”；
var text_height=text.offsetHeight；
如果（文本高度<容器高度）{checkHeight（）；}
}

另一个未来解决方案
使用<