多兰自适应布局(css3)

2019-09-10 郑州网站建设  

自适应多兰布局(中间含有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>

css3多兰自适应布局

运行后的效果:

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


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1847.html转载请标明出处,谢谢合作!
标签:
  • CSS3
  • 布局
  • 含有
  • 中间
  • 适应
  • marg