时间戳

首页 > 解决方案 > 如何将文本与底部对齐，同时将 css 形状浮动到一侧，以便文本换行到形状？

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

问题描述

我在 a 中有一些文本<p>，它在 a 中<div>。我有一个浮动到一侧的CSS 图像形状。我希望两个上部框中的文本包装到形状，但也与 div 的底部对齐。两个较低的框工作正常，因为我不需要垂直对齐其中的文本。问题是，文本的长度可以变化，行数也可以变化，所以我不能使用固定的高度。因此绝对定位不起作用，加上文本将忽略我的浮动 css 图像形状。

我已经阅读了几十个问题和答案，所有这些似乎都使用了 hacks。还有一个问题似乎和我的问题一样，但我再也找不到了，除了只有一个基于 javascript 的答案。我尝试使用 flexboxes，align-items:flex-end;但这不适用于我的浮动形状。我也尝试使用 a 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('https://i.stack.imgur.com/B1Dzu.png'); }
#bottom_left .shape { float:right; shape-outside:url('https://i.stack.imgur.com/Vxmz0.png'); }
#top_right .shape { float:left; shape-outside:url('https://i.stack.imgur.com/UL8uT.png'); }
#bottom_right .shape { float:left; shape-outside:url('https://i.stack.imgur.com/EGBRz.png'); }
<div id="wrapper">
   <div id="top_left" class="box">
      <img src="https://i.stack.imgur.com/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="https://i.stack.imgur.com/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="https://i.stack.imgur.com/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="https://i.stack.imgur.com/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_left.png

shape_top_right.png

shape_top_right.png

shape_bottom_left.png

shape_bottom_left.png

shape_bottom_right.png

shape_bottom_right.png

标签： javascripthtmlcsscss-shapes

解决方案

您可能会达到的最佳效果是通过使用该shape-outside属性

在这里查看一些文档。

但是，请注意，自 2019 年起，Internet Explorer 或 Microsoft Edge不支持此功能

一个足够简单的codepen示例就是这样

推荐阅读