javascript - 如何将文本对齐到底部，同时将 css 形状 float 到一边，以便文本换行到形状？

Question

我在 <p> 中有一些文字在 <div> 里面.我有一个漂浮在一侧的 css 图像形状。我希望上面两个框中的文本环绕形状，但也与 div 的底部对齐。下方的两个框工作正常，因为我不需要垂直对齐其中的文本。问题是，文本的长度和行数可能会有所不同，所以我不能使用固定的高度。因此绝对定位将不起作用，而且文本将忽略我的 float css 图像形状。

我已经阅读了数十个问题和答案，它们似乎都使用了 hack。还有一个问题似乎和我的问的一样，但是我找不到了，而且只有一个答案是基于 javascript 的。我尝试将 flexboxes 与 align-items:flex-end; 一起使用但这不适用于我的 float 形状。我也尝试使用 table和 vertical-align:bottom;但我的文字只是换行，并没有换行。

我想到的解决方法是使用 padding-top在文本上，但不知道文本的高度意味着文本并不总是将其定位到 div 的底部，尤其是当文本的长度发生变化时。

编辑:我对任何新想法都持开放态度。这只是我能想到的最好的方法。我什至开始玩弄所有四个盒子只使用一种形状的想法。但这似乎是一个更大的挑战。

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

编辑:我决定采用 Javascript 路线并正在研究解决方案。我愿意接受任何想法。

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

div, img, p  {
   margin:0px;
   border:0px;
   padding:0px;
}

#wrapper {
   display:block;
   position:absolute;
   left:0px;
   top:0px;
   width:100%;
   height:100%;
}

.box {
   display:block;
   position:absolute;
   width:50%;
   height:50%;
}

.box p { line-height:1.5em; padding:10px; }

/* The image shape is 300px x 300px. * /
/* I use 50vh because I want the shape size to always be half of the window height. */
/* This gives the illusion of one larger shape. */
.shape {
   position:relative;
   shape-margin:2em;
   width:50vh;
   height:50vh;
}

/* My workaround solution - #top_left p, #top_right p { padding-top:29vh; } */
#top_left { right:50%; top:0%; }
#bottom_left { right:50%; top:50%; }
#top_right { left:50%; top:0%; }
#bottom_right { left:50%; top:50%; }

#top_left p, #bottom_left p { text-align:right; }
#top_right p, #bottom_right p { text-align:left; }

#top_left .shape { float:right; shape-outside:url('/image/B1Dzu.png'); }
#bottom_left .shape { float:right; shape-outside:url('/image/Vxmz0.png'); }
#top_right .shape { float:left; shape-outside:url('/image/UL8uT.png'); }
#bottom_right .shape { float:left; shape-outside:url('/image/EGBRz.png'); }

<div id="wrapper">
   <div id="top_left" class="box">
      <img src="/image/B1Dzu.png" class="shape"  />
      <p>Here is some text. Here is some text. Here is some text.</p>
   </div>

   <div id="top_right" class="box">
      <img src="/image/UL8uT.png" class="shape"  />
      <p>Here is some text. Here is some text. Here is some text.</p>
   </div>

   <div id="bottom_left" class="box">
      <img src="/image/Vxmz0.png" class="shape"  />
      <p>Here is some text. Here is some text. Here is some text.</p>
   </div>

   <div id="bottom_right" class="box">
      <img src="/image/EGBRz.png" class="shape"  />
      <p>Here is some text. Here is some text. Here is some text.</p>
   </div>
</div>

我创建了一个图像来说明。粉红色的边框只是为了显示框的边界。 shape_top_left.png

shape_top_right.png

shape_bottom_left.png

shape_bottom_right.png

Answer 1

最好的方法可能是使用 shape-outside 属性

查看 here一些文档。

但是，请注意，从 2019 年开始，这不受支持 in Internet Explorer or Microsoft Edge

一个足够简单的codepen例子是this