跳至主要内容
CSS-Tricks
  • 文章
  • 笔记
  • 链接
  • 指南
  • 年鉴
  • 随机
搜索

文章标签
float

7 篇文章
{
,

}
文章“六边形及更多:灵活、响应式网格模式,无需媒体查询”的直链
float grid layout

六边形及更多:灵活、响应式网格模式,无需媒体查询

不久前,Chris 分享了这个漂亮的六边形网格。顾名思义,它使用——等等——CSS Grid 来构建布局。这是一个很巧妙的技巧!结合网格列、网格间隙和创意裁剪……

Avatar of Temani Afif
Temani Afif 于 2021 年 6 月 8 日 发布
文章“将元素浮动到底部角落”的直链
flexbox float shape-outside

将元素浮动到底部角落

需要将一个元素放置在右侧或左侧,以便文本环绕它?对于float 属性来说,这是一项简单的任务。但是,如果您还想将该元素(我们称之为……

Avatar of Temani Afif
Temani Afif 于 2024 年 5 月 21 日 发布
文章“CSS float 是否已弃用?”的直链
float

CSS float 是否已弃用?

前几天工作中出现了一个有趣的讨论:既然我们有了 CSS Grid 和 Flexbox,我们现在是否应该使用 CSS float 属性?…

Avatar of Robin Rendle
Robin Rendle 于 2021 年 2 月 11 日 发布
文章“为现代开发中的表格和浮动辩护”的直链
float table-layout tables

为现代开发中的表格和浮动辩护

二十多年前,表格是 HTML 中创建网页的主要方式。它让网页构建者能够以某种“设计”的方式一致地控制页面构建。网站不再只需要以线性方式从上到下排列——…

Avatar of John Macpherson
John Macpherson 于 2020 年 10 月 30 日 发布
文章“将元素浮动到段落中间”的直链
clip-path float shape-outside

将元素浮动到段落中间

假设您希望将图像(或任何其他元素)视觉上向左浮动到一段文本中。但是,就像……在段落中间,而不是在顶部。这是可以做到的,但它肯定属于……

Avatar of Chris Coyier
Chris Coyier 于 2019 年 11 月 4 日 发布
文章“媒体对象,多种方法”的直链
flexbox float grid layout tables

媒体对象,多种方法

媒体对象模式是:左侧是图像元素,右侧是标题和文本。

这就是 Nicole Sullivan 所说的,并且名称被沿用下来。这是一个非常简单的模式,但就像所有网页设计一样,它可以……

Avatar of Chris Coyier
Chris Coyier 于 2017 年 1 月 28 日 发布
文章“关于浮动的一切”的直链
clear clearfix float layout

关于浮动的一切

Float 是一个 CSS 定位属性。要了解其用途和来源,我们可以参考印刷设计。在印刷版面中,图像可以设置在页面中,以便文本根据需要环绕它们。这通常被称为“文本环绕”,也恰如其分。
Avatar of Chris Coyier
Chris Coyier 于 2021 年 3 月 25 日 发布

CSS-Tricks 由 DigitalOcean 提供支持。

关注网页开发最新动态

通过我们精心制作的时事通讯

DigitalOcean
  • 关于 DO
  • Cloudways
  • 法律信息
  • 获取免费额度!
CSS-Tricks
  • 为我们撰稿!
  • 与我们合作广告
  • 联系我们
社交媒体
  • RSS 订阅
  • CodePen
  • Mastodon
  • X
返回顶部

© 2024 . All rights reserved.