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

李彣辉 2016-03-05 04:20:51

最简洁的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>