龙空技术网

css3多兰自适应布局

牙买加花裤衩 319

前言:

今天看官们对“css三列自适应布局”都比较关切,小伙伴们都想要知道一些“css三列自适应布局”的相关资讯。那么小编同时在网上收集了一些有关“css三列自适应布局””的相关文章,希望看官们能喜欢,你们快快来学习一下吧!

多看今日,一同事问我,自适应多兰布局(中间含有margin边界),这种除了百分比,还有没有别的方法处理:

思索一阵,发现box-flex布局,比较不方便。还是用:column-count属性(指定的列之间的差距)更快捷贴近场景。

完整demo:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>demo</title>

<style>

*{margin:0;padding:0;}

/*多栏自适应布局*/

.newspaper{

-moz-column-count:4; /* Firefox */

-webkit-column-count:4; /* Safari and Chrome */

column-count:4;

-moz-column-gap:40px; /* Firefox */

-webkit-column-gap:40px; /* Safari and Chrome */

column-gap:40px;

}

/*内容垂直左右居中*/

.newspaper .each{

background:red;height:200px;

display: -webkit-flex;

display: flex;

-webkit-align-items: center;

align-items: center;

-webkit-justify-content: center;

justify-content: center;

}

</style>

</head>

<body>

<div class=" ">

<div class=" ">内容1</div>

<div class=" ">内容2</div>

<div class=" ">内容3</div>

<div class=" ">内容4</div>

</div>

</body>

</html>

运行后的效果:

注: IE9及更早 IE 版本浏览器不支持该属性

标签: #css三列自适应布局