Question

所有我都试图构建自己的CSS网格系统，所以基本上我已经应用了主算法来生成

列。

＆＃13;

script.run()

＆＃13;

var func =  (function (numberOfColumn){
var str = "",result = 0;

for (var i = 1 ; i < (numberOfColumn + 1); i++){
  result = (i/numberOfColumn) * 100;
  str += ".col-full-" + i + "{ width: "+ result + "%;}\n";
}
console.log(str);

}(12));

＆＃13;

*{
    margin: 0 0 0 0;
    padding: 0  0 0 0;
    -moz-box-sizing:border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

[class^="col-"]{
    float:left;
    height: 50px;
    display:block;
    }
[class^="col-full-"]                            { margin-left:0; margin-right:0; }
body {
    width:100%;
    height:100%;
   background-color:#00ff21;
}

.row{
    width:100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    float: left; 
    clear: left;
}

.col-full-1{ width: 8.333333333333332%;}
.col-full-2{ width: 16.666666666666664%;}
.col-full-3{ width: 25%;}
.col-full-4{ width: 33.33333333333333%;}
.col-full-5{ width: 41.66666666666667%;}
.col-full-6{ width: 50%;}
.col-full-7{ width: 58.333333333333336%;}
.col-full-8{ width: 66.66666666666666%;}
.col-full-9{ width: 75%;}
.col-full-10{ width: 83.33333333333334%;}
.col-full-11{ width: 91.66666666666666%;}
.col-full-12{ width: 100%;}


.pink {

background-color:pink;
}

.red {
background-color:red;
}

＆＃13;

这一部分刚刚完成，然后我开始第二部分，即将水槽添加到仍然使用百分比单位的列，所以我应用此算法生成带有装订线的列。

＆＃13;

        <div class="row">
        <div class="col-full-1 red"> col  1 </div>
        <div class="col-full-1 pink "> col  2 </div>
        <div class="col-full-1 red"> col  3 </div>
        <div class="col-full-1 pink "> col  4 </div>

        <div class="col-full-1 red"> col  5 </div>
        <div class="col-full-1 pink "> col  6 </div>
        <div class="col-full-1 red"> col  7 </div>
        <div class="col-full-1 pink "> col  8 </div>

        <div class="col-full-1 red"> col  9 </div>
        <div class="col-full-1 pink "> col  10 </div>
        <div class="col-full-1 red"> col  11 </div>
        <div class="col-full-1 pink "> col  12 </div>
        </div>

＆＃13;

var func =  (function (numberOfColumn, GutterSize){
var totalNumberOfGutter = numberOfColumn + 1,
    totalSizeOfGutter   = totalNumberOfGutter * GutterSize,
    singleColumn        = ((1/numberOfColumn) * (100 - totalSizeOfGutter)),
    result              = 0,
    str                 = "";
    
for (var i = 1; i < numberOfColumn +1; i++){
    result = (singleColumn * i) + (GutterSize * (i-1));
    str += ".col-gut-" + i + "{ width: " + result + "%;}\n";
}
console.log(str);

}(12,1));

＆＃13;

*{    margin: 0 0 0 0;
    padding: 0  0 0 0;
    -moz-box-sizing:border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    
    }

body {
    width:100%;
    height:100%;
    background-color:#00ff21;
}

.row{
    width:100%;
    text-align: center;
    float: left; 
    clear: left;
}

[class^="col-"]{
    float:left;
    height: 50px;
    display:block;   
}

[class^="col-gut-"]                             { margin-left:.5%; margin-right:.5%; }
[class^="col-gut-"] + [class^="col-gut-"]       { margin-left:.5%; margin-right:.5%;} 

[class^="col-gut-"]:first-of-type  { margin-left:1%;  }
[class^="col-gut-"]:last-of-type   { margin-right:1%; }

.pink  {background-color:pink;}
.red   {background-color:red;}
.black {background-color:black;}

.col-gut-1{ width: 7.25%;}
.col-gut-2{ width: 15.5%;}
.col-gut-3{ width: 23.75%;}
.col-gut-4{ width: 32%;}
.col-gut-5{ width: 40.25%;}
.col-gut-6{ width: 48.5%;}
.col-gut-7{ width: 56.75%;}
.col-gut-8{ width: 65%;}
.col-gut-9{ width: 73.25%;}
.col-gut-10{ width: 81.5%;}
.col-gut-11{ width: 89.75%;}
.col-gut-12{ width: 98%; margin-left:1% !important; margin-right:1% !important;}

＆＃13;

我的问题是我试图在同一行使用带有gutter-column的全列。我试图生成第三类＆＃34;拉＆＃34;但遗憾的是，它还没有成功。一些可能的答案是使用JavaScript解决问题，但我需要一个纯CSS的解决方案。

如何在同一行中生成带有装订线和全宽列的网格系统接受列

0 个答案: