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