【笔记】学习CSS布局17—

这里有一系列新的CSS属性，可以帮助你很轻松的实现文字的多列布局。让我们瞧瞧：

.three-column {padding: 1em;-moz-column-count: 3;-moz-column-gap: 1em;-webkit-column-count: 3;-webkit-column-gap: 1em;column-count: 3;column-gap: 1em;
}

代码实例：

<!DOCTYPE html>
<html>
<head><style type="text/css">.three_column {padding: 1em;-moz-column-count:3;-moz-column-gap:1em;-webkit-column-count:3;-webkit-column-count:3;column-count:3;column-gap:1em;background-color: #6ac5ac;}</style>
</head>
<body><div class="three_column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</div>
</body>
</html>

效果图如下：

CSS columns是很新的标准，所以你需要使用前缀，并且它不被IE9及以下和Opera Mini支持。还有许多和 column 相关的属性，点击这里了解更多。否则让我们讨论下一个主题。

【笔记】学习CSS布局17——column相关推荐

《学习CSS布局》学习笔记
近几天做了一个小的企业展示网站.虽然页面是在模板的基础上改的,但改的多了不熟悉CSS也很麻烦.正好我看到了学习CSS布局这个网站,于是补习了一下CSS知识. CSS的显示 CSS的元素分为两类:块级元 ...
CSS学习笔记--Div+Css布局（div+span以及盒模型）
1.DIV与SPAN 1.1简介 1.DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式 2.DIV和span的区别在与,span是内联元素,div是块级元素内联元 ...
前端学习——CSS布局
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.正常布局流 `display`属性弹性盒子(Flexbox) Grid布局浮动定位技术前言提示:这里可以 ...
[前端笔记006]CSS布局之字体 -- font
资源推荐zeal:离线文档查看器 https://zealdocs.org/ 推荐w3c:线上文档 https://www.w3school.com.cn/ 本笔记参考视频,尚硅谷:BV1XJ411 ...
【CSS笔记】CSS布局之五种定位方式（静态、相对、绝对、固定、粘性）
目录一.CSS定位布局 1.1.static静态定位 1.2.relative相对定位 1.3.fixed固定定位 1.4.absolute绝对定位 (1)默认绝对定位参考点 (2)设置绝对定位参考 ...
CSS基础学习十七：CSS布局之定位
在我们开始学习CSS布局之前,先来了解一下文档流的概念.文档流即是HTML的布局机制,块级元素占一行, 行内元素不占一行.将窗体自上而下分成一行行,并在每行中按从左往右的顺序排放元素. 一CSS定位和 ...
CSS 布局经典问题初步整理
本文主要对 CSS 布局中常见的经典问题进行简单说明,并提供相关解决方案的参考链接,涉及到三栏式布局,负 margin,清除浮动,居中布局,响应式设计,Flexbox 布局,等等. CSS 基础知识 ...
轻松学DIV教程（div＋css布局）
我爱棒棒糖! 你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习: 第一种可能是你还没有理解CSS处理页面的原理.在你考虑你的页面整体表现效果前,你应当先考虑内容的语 ...
前端小白如何学习 CSS
很多人想让我给他们推荐有关CSS部分的教程,或者问我如何学习CSS. 我也看到很多人对CSS的部分内容感到困惑,一部分原因是由于对语言的过时认识. 鉴于CSS在过去几年中发生了相当大的变化,这是一个更 ...

【笔记】学习CSS布局17——column

【笔记】学习CSS布局17——column相关推荐

最新文章

热门文章