不喜欢bootstrap的栅格系统，太复杂了，我发明了一个最简洁的20列栅格系统

最新推荐文章于 2021-01-11 23:52:10 发布

李彣辉

最新推荐文章于 2021-01-11 23:52:10 发布

阅读量651

点赞数

文章标签：栅格 bootstrap html5

李芠辉

本文链接：https://blog.csdn.net/li_wen_hui/article/details/50809434

版权

最简洁的20列栅格系统。
但是还有有点小问题

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>栅格系统</title>
</head>
<style>
.row-fluid{width:1200px;margin:5px auto;background-color:yellow;}


/*.row-fluid .span* {float:left;margin:5px 1% 5px 1% ;}*/


.row-fluid .span20 { width:100%;float:left;margin:5px 1% 5px 0 }
.row-fluid .span19 { width:94%;float:left;margin:5px 1% 5px 0 }
.row-fluid .span18 { width:89%;float:left;margin:5px 1% 5px 0 }
.row-fluid .span17 { width:84%;float:left;margin:5px 1% 5px 0 }
.row-fluid .span16 { width:79%;float:left;margin:5px 1% 5px 0 }
.row-fluid .span15 { width:74%;float:left;margin:5px 1% 5px 0 }
.row-fluid .span14 { width:70%;float:left;margin:5px 1% 5px 0 }
.row-fluid .span13 { width:64%;float:left;margin:5px 1% 5px 0 }
.row-fluid .span12 { width:59%;float:left;margin:5px 1% 5px 0 }
.row-fluid .span11 { width:54%;float:left;margin:5px 1% 5px 0 }
.row-fluid .span10 { width:49%;float:left;margin:5px 1% 5px 0 }
.row-fluid .span9 { width:44%;float:left;margin:5px 1% 5px 0 }
.row-fluid .span8 { width:39%;float:left;margin:5px 1% 5px 0 }
.row-fluid .span7 { width:34%;float:left;margin:5px 1% 5px 0 }
.row-fluid .span6 { width:29%;float:left;margin:5px 1% 5px 0 }
.row-fluid .span5 { width:24%;float:left;margin:5px 1% 5px 0 }
.row-fluid .span4 { width:20%;float:left;margin:5px 1% 5px 0 }
.row-fluid .span3 { width:14%;float:left;margin:5px 1% 5px 0 }
.row-fluid .span2 { width:9%;float:left;margin:5px 1% 5px 0 }
.row-fluid .span1 { width:4%;float:left;margin:5px 1% 5px 0 }
</style>
<body  >
<div style="width:1200px;margin:0 auto;background-color:gray;">
width:1200px;margin:0 auto;background-color:gray;
</div>


<div class="row-fluid">
<div style="background-color:blue;"  class="span20">
span20 本来width=99%;<br/>
span*=列宽*列数+槽宽*（槽数）<br/>
=4%*20+1%*(20-1)<br/>
=99% 剩下1%手动加上去吧！！！
</div>
</div>


<div style="clear:both;">
</div>


<div class="row-fluid">
<div class="span6" style="background-color:red;">
span6
</div>
<div class="span6" style="background-color:red;">
span6
</div>
<div class="span8" style="background-color:red;">
span8 右边的1%没有使用<br>
span6+span6+span8<br/>
=29%+29%+39%<br/>
=99%,1%没用了？手动加上去就不好玩了！！！
</div>
</div>


</body>
</html>

我的网站 http://www.201603a.09-29.com/grid/grid.php

李彣辉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
不喜欢bootstrap的栅格系统，太复杂了，我发明了一个最简洁的20列栅格系统

最简洁的20列栅格系统。但是还有有点小问题[code=html] 栅格系统.row-fluid{width:1200px;margin:5px auto;background-color:yellow;}/*.row-fluid .span* {float:left;margin:5px 1% 5px 1% ;}*/.row-fl
复制链接

扫一扫