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

这是我们在形式可访问性上进行的小型系列中的第三篇文章。如果您错过了第二篇文章,请查看“以:focus-visible的管理用户焦点”。在

CSS盒子阴影和轮廓属性获得了主题。让我们查看一些在真实主题中起作用的示例,以及我们必须将这些样式应用于WordPress块和元素的选项。

本教程演示了使用智能表单框架创建外观专业的JavaScript表单(注意:不再可用)。 尽管框架本身不可用,但原理和技术仍然与其他形式的建筑商相关。

构建内联文本编辑器并不是微不足道的。 该过程首先要使目标元素可编辑,并在此过程中处理潜在的语法异常。 创建您的编辑器 要构建此编辑器,您需要动态修改内容

Svelte Transition API提供了一种使组件输入或离开文档(包括自定义Svelte Transitions)时动画组件的方法。

本文探讨了Envato Market上可用的PHP表单构建器脚本,比较了其功能,灵活性和设计。 在研究特定选项之前,让我们了解PHP形式构建器是什么以及为什么要使用一个。 PHP形式

该教程通过使用node.js,express和multer构建文件上传系统来指导您。 我们将介绍单个和多个文件上传,甚至演示在MongoDB数据库中存储图像以进行以后的检索。 首先,设置您的projec


热AI工具

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

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

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

Dreamweaver CS6
视觉化网页开发工具

SecLists
SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

安全考试浏览器
Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

EditPlus 中文破解版
体积小,语法高亮,不支持代码提示功能

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