您的位置：首页 > Web前端 > CSS

css3属性flex弹性布局设置三列(四列)分布样式

2016-07-16 18:06 846 查看
参考：阮一峰的网络日志

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
body{
padding: 0;
margin: 0;
}
.warp{
position:fixed;
bottom: 0px;
display:-webkit-box;
display:flex;
display:-ms-flex;
display:-webkit-flex;
　　　　 width:100%;

}
.div1,.div2,.div3{
height:50px;
flex:1;
-ms-flex:1;
-webkit-flex:1;
-webkit-box-flex:1;
position: relative;
background: #ccc;
text-align:center;
}
</style>
<body>
<div class="warp">
<div class="div1">这是div1</div>
<div class="div2">这是div2</div>
<div class="div3">这是div3</div>
</div>
</body>
</html>


效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航