多列:实现网页布局
概念:
引入例子来实现
先写一个HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>beijingshezhi</title>
<link href="css/new_file.css" type="text/css" rel="stylesheet" />
</head>
<body >
<div class="div">我是一个显可爱的人,我超级可可爱
我是一个显可爱的人,我超级可可爱
我是一个显可爱的人,我超级可可爱
我是一个显可爱的人,我超级可可爱
我是一个显可爱的人,我超级可可爱
我是一个显可爱的人,
我超级可可爱我是一个显可爱的人,
我超级可可爱我是一个显可爱的人,我超级可可爱
我是一个显可爱的人,
我超级可可爱我是一个显可爱的人,
我超级可可爱我是一个显可爱的人,我超级可可爱
我是一个显可爱的人,
我超级可可爱我是一个显可爱的人,我超级可可爱
我是一个显可爱的人,我超级可可爱
我是一个显可爱的人,我超级可可爱
我是一个显可爱的人,我超级可可爱
我是一个显可爱的人,我超级可可爱
我是一个显可爱的人,我超级可可爱
我是一个显可爱的人,我超级可可爱
我是一个显可爱的人,我超级可可爱
</div>
</body>
</html>
再来对网页进行设计:
在写一个css文件:
.div{
background-color: antiquewhite;
column-count: 4;
column-gap: 30px;
column-rule: 2px outset red;
-webkit-column-count: 4;
-webkit-column-gap: 30px;
-webkit-column-rule: 2px outset red;
}
让我们来看下实现的效果:
完成,更多css用法,看其他博客》》》