您的位置：首页 > Web前端

【ife】任务八 : 响应式网格(栅格化)布局

2016-12-19 15:13 155 查看

HTML：

<div class="row">
<div class="col-sm-4 col-xs-6">
<div class="content"></div>
</div>
<div class="col-sm-4 col-xs-6">
<div class="content"></div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="content"></div>
</div>
<div class="col-sm-3 col-xs-3">
<div class="content"></div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="content"></div>
</div>
<div class="col-sm-3 col-xs-3">
<div class="content"></div>
</div>
<div class="col-sm-1 col-xs-2">
<div class="content"></div>
</div>
<div class="col-sm-1 col-xs-2">
<div class="content"></div>
</div>
<div class="col-sm-2 col-xs-8">
<div class="content"></div>
</div>
<div class="col-sm-2 col-xs-3">
<div class="content"></div>
</div>
<div class="col-sm-6 col-xs-3">
<div class="content"></div>
</div>
</div>

CSS：

body{
border:1px solid #999;
padding:10px;
}
.row{
margin:0;
}
[class*='col-']{
float:left;
height:70px;
padding:10px;
}
.content{
border:1px solid #999;
background-color:#eee;
height:50px;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航