多列 属性 实现双列布局
1. 前言
这是 一个 经常被忽略的 一个 属性 ，因为很少有人知道，或者说大部分人仅仅只是知道，但并没有使用过。
它的语法形式是酱紫的： columns: 2(列数); 。
2. 实现
<!DOCTYPE html>
< html lang = " en " >
< head >
< Meta charset = " UTF-8 " >
< Meta name = " viewport " content = " width=device-width, initial-scale=1.0 " >
< title > Document </ title >
< style >
/* 清除 默 认样式 */
* { padding : ; margin : ; }
/* 令html和body全屏 显示 , 并有 一个 灰色背景 */
html, body { height : ; background : gray ; }
/* 找到直接父元素 */
body {
/* 将列数设置为2 */
columns : ;
/* 设置列间距 */
column-gap : px ;
}
div {
/* 给个高度 */
height : ;
/* 白色背景 */
background : white ;
}
/* 左边盒子设置左边距 */
.left { margin-left : px ; }
/* 右边盒子设置右边距 */
.right { margin-right : px ; }
</ style >
</ head >
< body >
< div class = " left " > </ div >
< div class = " right " > </ div >
</ body >
</ html >
运行结果：
3. 小结
多列 属性 columns 是 CSS3 的新增 属性 。
但它却并不像其他 CSS3 新 属性 （如 transform）知名度那么高，甚至很多人都不知道还有这么个玩意，大家有空的话可以去了解一下。
左浮动法 ? ? 中文布局CSS库声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did254506