搜索
首页web前端css教程将元素浮动到底角

将元素浮动到底角

Mar 25, 2025 am 09:47 AM

将元素浮动到底角

需要在右侧或左侧布置一个元素,以使文本包裹在其周围吗?对于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中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
在JavaScript应用程序中包括CSS的许多方法在JavaScript应用程序中包括CSS的许多方法Apr 19, 2025 am 10:08 AM

欢迎来到前端发展之地中一个引起争议的话题!我敢肯定,大多数阅读此书都遇到了您的博览会

引入NetLify分析引入NetLify分析Apr 19, 2025 am 10:07 AM

您在附带项目中工作一段时间。您认为它很酷!您决定将其释放到世界上。然后……顺利进行。否则进展不顺利。等待,

五星级评分的五种方法五星级评分的五种方法Apr 19, 2025 am 10:04 AM

在喜欢和社会统计的世界中,评论是留下反馈的非常重要的方法。用户通常喜欢以前知道他人的意见

如果您不知道CSS,哪些CSS很棒,这是最有意义的?如果您不知道CSS,哪些CSS很棒,这是最有意义的?Apr 19, 2025 am 09:56 AM

彼得·保罗(Peter-Paul)发布了这个问题:

用剪贴路径动画用剪贴路径动画Apr 19, 2025 am 09:52 AM

剪辑路径是我们通常知道在那里的CSS属性之一,但出于任何原因可能不会经常到达。从某种意义上说有点令人生畏

将GraphQL操场与Gatsby一起使用将GraphQL操场与Gatsby一起使用Apr 19, 2025 am 09:51 AM

我假设你们中的大多数人已经听说过盖茨比,至少很松散地知道,这基本上是一个用于React站点的静态站点生成器。通常

类型或测试:为什么不呢?类型或测试:为什么不呢?Apr 19, 2025 am 09:50 AM

时不时地,关于键入JavaScript的价值的辩论会引起辩论。 “只写更多测试!”大喊一些对手。 “用类型替换单位测试!”

GIT的图形用户界面GIT的图形用户界面Apr 19, 2025 am 09:46 AM

如今,Lemme汇集了Guis的主要参与者。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热工具

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器