css3-columns多列布局
1 /*css3中的布局*/ 2 .wrapper{ 3 margin:auto; 4 width:300px; 5 height:200px; 6 border:2px dotted blue; 7 -webkit-columns:15px 3;/*表示多列布局,每一列15px 有3列,内容多于3列则该参数失效!例如对一篇文章可以进行多列布局显示*/ 8 9 -webkit-column-count:3; 10 -webkit-column-width:15px;/*将width和count属性拆开来单独使用,弱拆开且同时使用,浏览器根据具体情况会可能会使某一属性失效*/ 11 -webkit-column-gap:2em;/*设置列间距为2字符,不设置默认情况下为1字符间距*/ 12 13 -webkit-column-rule:2px solid red;/*定义列与列之间的分割线为2px 实体 红色 该分割线不占用空间位置 like a ghost*/ 14 15 } 16 h2{ 17 text-align:center;/*文本居中显示*/ 18 -webkit-column-span:all;/*令h2横跨所有列*/ 19 }
Do something useful!
标签:
前端
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?