将元素浮动到底角

需要在右侧或左侧布置一个元素，以使文本包裹在其周围吗？对于Float属性来说，这是一项简单的任务。但是，如果您还想将该元素（让我们称为图像）将其推向底部的一个角落之一，那又如何呢？听起来有些棘手，对吧？我们可能需要JavaScript？

不，很少有（棘手的）CSS可以做到！这是仅CSS的解决方案，无论大小和内容的尺寸和内容如何，​​都可以使您的图像粘在底角。

调整包装元素的大小，并看到工作中的魔力：

让我们剖析代码。

标记和布局

我们需要包含所有内容的包装元素，并且我们将在其上使用Flexbox。 Flexbox使我们能够依靠默认的拉伸对齐方式来以后使用高度：100％。

 <div>
  <div>
    <div> <img  alt="将元素浮动到底角" > </div>
    lorem ipsum dolor ...
  </div>
</div>

 .wrapper {
  显示：Flex;
}

。漂浮 {
  浮点：对；
  身高：100％；
  显示：Flex;
  准项目：flex-end;
  Shape -Outside：插图（计算（100％-100px）0 0）;
}

.wrapper中的.box是我们的flex项目。我们不需要将任何特定的CSS应用于盒子。它定义了包装纸的高度，同时将其延伸到相同的高度。这种行为将为我们提供一个“参考高度”，可以由子元素使用。

从规范中：

如果弹性项目具有对齐的自我：strave，重做其内容的重做布局，则将使用的尺寸视为其确定的交叉大小，以便可以解决百分比大小的孩子。

关键字是确定的，它允许我们安全地使用框元素内部的百分比（％）高度。

现在用于浮动元素

由于上面详细介绍的高度计算，我们的.float元素将占据文本内容旁边的整个高度。在此元素内部，我们使用Flexbox对齐将图像推到底部。

现在，使用Shape-Outside属性来实现真正的技巧。这是MDN定义的方式：

Shape-Outside CSS属性定义了一个形状（可能是非矩形），相邻内联内容应包装。默认情况下，内联内容包裹在其边距框上； Shape-Outside提供了一种自定义此包装的方法，使得可以将文本包裹在复杂的对象上，而不是简单的框上。

换句话说，Shape-Outside设置了内容在元素的边界框中流动的方式。

它需要多个值。其中之一是插图（）函数，它再次根据MDN：

定义一个插图矩形。当提供前四个参数的所有参数时，它们代表了从参考框内的顶部，右，底部和左侧偏移，该框中定义了插图矩形边缘的位置。

因此，使用Shape -Outside：Intset（calc（100％-x）0 0），我们可以创建一个插图矩形，该矩形正好从图像的顶部开始。顶部等于100％-x，其中x是图像高度，100％是.float元件的高度。这允许文本包裹在图像顶部的自由空间内。这是响应迅速的，加上我们可以轻松地在左右之间切换（通过调整Float属性）

就是这样！唯一的主要警告是您需要知道图像高度。

让我们优化标记

我们仍然可以稍微优化代码，并删除图像周围的额外包装器。

 <div>
  <div>
    <img  alt="将元素浮动到底角" >
    lorem ipsum dolor ...
  </div>
</div>

然后我们的CSS将成为

.wrapper {
  显示：Flex;
}

。漂浮 {
  浮点：对；
  身高：100％；
  宽度：100px;
  Shape -Outside：插图（CALC（100％-100px / *高度 * /）0 0）;
  对象拟合：包含；
  对象位置：底部；
}

由于我们删除了额外的包装器，因此我们需要另一种技术将图像放在底角。为此，我们使用对象拟合和对象位置，但必须明确指定图像的宽度。

使用此方法，我们需要知道图像的宽度和高度与以前仅需要高度的代码不同。

想要更多吗？

我们可以进一步扩展这个概念，以说明更典型的情况。例如，我们可以将图像向右浮动，但是将其固定在盒子的中间，并以合理性为中心：中心：还将插图矩形从插图（calc（100％-x）0 0）更改为插图（calc（50％-x/2）0 0 0 0 0 0），将插图矩形调整到中间。

我们还可以在两个底角上浮动两个图像：

这里没什么复杂的。我只是两次使用相同的浮动元件，一次在右侧，然后在左侧。当我们可以将图像放在所有四个角落时，为什么要在两个角落停下来：

同样的基本想法也在这里发挥作用，但是我们也依靠顶级图像的共同浮点功能。但是，您会注意到这是该概念开始分解的地方，并且根据包含框的大小，我们会得到一些不必要的溢出。我们可以使.float元素的高度大于100％，并应用一些“魔术数”，从而通过调整图像的填充和边距来平滑事物。

您是否知道Shape-Outside接受Radial-Gradient（）作为值？我们可以使用它放置如下：

梯度的透明部分是文本可以进行的可用空间。您可能已经注意到，我们也将边界拉迪乌斯应用于图像。 Shape-Outside属性将简单地影响.float元素，我们需要手动调整图像的形状，以遵循由Shape-Outside定义的形状。

当我们使用时，让我们将其与先前的示例结合起来，该示例使用Justify-content：中心将图像固定到盒子的垂直中心：

另一种径向级别（）以及另一种边框 - 拉迪乌斯配置。

我们本可以使用线性级别（）而不是为包装区域形成三角形形状：

这是我们用于径向级别（）的想法。最大的区别是，我们使用剪贴式路径而不是Border-Radius来剪裁我们的图像。

而且，由于我们为其他人做了，所以让我们使用Justify-content：中心想法将图像固定到盒子右边缘的垂直中心：

我们在上面的演示中使用了圆锥分子（），并带有形状外侧，以定义三角形的形状和夹子路径以在图像上获得相似的形状

在图像具有装饰性的情况下，所有这些示例仍然可以使用较少的代码进行优化（对于SEO目的而言，HTML内部不需要时）。让我们用伪元素替换.float元素，然后将图像应用于背景：

我们正在使用蒙版来显示所需的图像的部分，并且猜猜它使用与Shape-Outside相同的值！因此，我们要做的就是定义形状的一个值。

就是这样！

这里有很多可能性不仅在拐角处放置矩形，而且要使用任何相同的代码结构，在任何位置上的任何形状。我们只需要：

• 调整Shape-Outside属性以定义形状
• 在图像上应用一些样式以遵循先前定义的形状或在使用伪元素版本的情况下对掩码应用相同的值

然后，即使在响应式设计中，一切都将其放置。

以上是将元素浮动到底角的详细内容。更多信息请关注PHP中文网其他相关文章！