首页 > 其他分享> 文章详细

栅格布局的理解

2019-12-15 17:03:51 阅读：286 来源： 互联网

标签：box width 布局栅格 1px 理解 col row

栅格系统布局主要被绑定在Bootstrap之类的框架上，那么我们如果不需要接入整个框架，做一个自己的栅格化的布局该怎么做呢？

1.容器container ，设置box-sizing：border-box；设置整个布局的宽度通常为100%为例；

2.行row，防止溢出行需要清楚浮动clear：both;

3.列column,常用pc端12列，移动端6列。列数越多内容就会更加的稠密，当所有的列都为空值的话，他们就会堆叠起来，为避免这一问题，a：给列设置float属性设置最小高度为1px，float：left；min-height：1px；

b：列的宽度为容器的宽度（container）/列的总数（12/6）=列的宽度，列宽16.6%=100%/6

源码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{
list-style: none;
}
.container-wrap{
width: 100%;
box-sizing: border-box;
min-width: 1200px;
}
.row:before,row:after{
content: '';
display: table;
clear: both;

}
[class*='col-']{
float: left;
min-height: 1px;
width: 16.6%;
padding: 10px;
}
.col-1{
width: 48%;
}
.col-2{
width: 31%;
}
.col-3{
width: 48%;
}
.outline *{
/*outline: 1px solid blue;*/
border: 1px solid #000000;
}
</style>
<body>
<div class="container-wrap outline">
<ul class="row">
<li class="col-1">1-1</li>
<li class="col-1">1-1</li>

</ul>
<ul class="row">
<li class="col-2">2-1</li>
<li class="col-2">2-1</li>
<li class="col-2">2-1</li>

</ul>
<ul class="row">
<li class="col-3">3-1</li>
<li class="col-3">3-1</li>
</ul>

</div>
</body>
</html>

运行结果

标签：box,width,布局,栅格,1px,理解,col,row
来源： https://www.cnblogs.com/wensx/p/12044367.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

栅格布局的理解