css利用display:box简单快速实现垂直多列布局

最新推荐文章于 2024-07-11 11:23:22 发布

siriva

最新推荐文章于 2024-07-11 11:23:22 发布

阅读量3.2k

点赞数 1

文章标签：多列布局 css3 box 浮动布局

本文链接：https://blog.csdn.net/rosemarryTop/article/details/53266925

版权

css3新添加的属性display:box特性与flex-box特性结合可简单快速的实现多列等比布局，用起来很方便。
这里大致的说一下这两个属性的意义，给***父级元素***添加display:box样式可使其***子元素***排列在同一水平上，box-flex：x表示此子元素占据父元素的几份，父元素被分成几份有所有子元素所决定。
不过这个属性目前还没有得到firefox、Opera、chrome浏览器的完全支持，所以在使用的时候还是要加上各大浏览器的前缀：firefox(-moz-)、opera(-o-)、chrome/safari（-webkit-)。接下来直接上代码：

HTML代码：

<div class="wrap">
	    <div class="wrap-one">第一块</div>
	    <div class="wrap-two">第二块</div>
	    <div class="wrap-three">第三块</div>
</div>

CSS代码：

.wrap{
	width:800px;
	height:200px;
	display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -o-box;
    display: box;
}
.wrap-one{
    -webkit-box-flex: 3;
    -moz-box-flex: 3;
    -ms-flex: 3;
    -o-box-flex: 3;
    box-flex: 3;
    ba