如何在CSS网格系统中偏移div列

Question

有没有人知道偏移div前排的前两个s,它们的类col-3-12具有偏移量offset-6-12并且offset-9-12位于我的网格系统的右侧jsFiddle

CSS:

body {
    font:20px/1.2 Verdana, Arial; padding:0px; margin:0px;
}
*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing:border-box;
}
.container {
    padding: 20px 20px 0 20px; background-color: red
}
.row {
    padding: 0;
    *zoom: 1;
}
.row:after, .row:before {
    content: ' ';
    display: table;
}
.row:after {
    clear: both;
}
.row > [class*='col-']:first-child {
    margin-left: 0;
}
.row > [class*='col-']:last-child {
    margin-right: 0;
}
.row > [class*='col-'] {
    /* edit here*/
    margin:0px 10px 20px 10px 
}
[class*="col-"] {
    float:left; 
    height:300px;
    background-color: #dedede;
    border: 1px solid #000;

}
[class*=col-]:last-of-type {

}
.col-1-12 {
    width: calc((100% - (12/1 - 1) * 20px) / 12 * 1);

}
.col-2-12 {
    width: calc((100% - (12/2 - 1) * 20px) / 12 * 2);
}
.col-3-12 {
    width:  calc((100% - (12/3 - 1) * 20px) / 12 * 3);  
}
.col-4-12 {
    width: calc((100% - (12/4 - 1) * 20px) / 12 * 4);
}

HTML:

<div class="container">
    <div class="row">

        <div class="col-3-12 offset-6-12">
            Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>  
        <div class="col-3-12 offse-9-12">
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
        </div>
    </div>
    <div class="row">
        <div class="col-3-12">
            Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>  
        <div class="col-3-12">
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
        </div>
        <div class="col-4-12">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
        <div class="col-2-12">
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
        </div>      
    </div>

</div>

Answer 1

那么,对于偏移量,您需要将左边距应用于浮动列以将它们推向右侧.

该值margin-left等于:

• 对于第一列不具有左边界本身:对width的previous columns + the gutter width.

• 对于第二列(其他列):

  • ^{如果列具有一个左/右margin(产生阴沟):}
    该width的previous columns+the gutter width+1/2 gutter width.(由于列的左/右margin宽度为1/2的沟槽宽度)

  • ^{如果列没有margin-left(即阴沟里只被创建margin-right):}
    在width的previous columns+the gutter width.

例如:

• 对于第一列,我们计算左边距.offest-6如下:

.row [class*="col-"]:first-child.offest-6-12 {
    margin-left: calc(((100% - (12/6 - 1) * 20px) / 12 * 6 ) + 20px);
    /*                |          width of col-6-12         | + gutter width */
}

工作演示.

_{注意:我在这里使用了多个选择器以获得更高的特异性值.}

另请注意,由于列彼此相邻浮动,您只需要使用.offset-*第一列的类将它们都推到右侧.

• 对于左(和右)边距的第二列(其他列):

由于该列具有左(和右)边距(等于天沟的1/2 10px)=

.row [class*="col-"].offest-6-12 {
    margin-left: calc(((100% - (12/6 - 1) * 20px) / 12 * 6 ) + 20px + 10px);
    /*                |          width of col-6-12         | + (1   + 1/2) gutter width */
}

更新的演示.(Sassy方式:Sass版)

注意

对于第二列,您应该使用,offset-6因为col-3在当前列之前有另一列.

即你应该计算列数,包括偏移量.
例如:col-3+ col-3 including offset-6= 12 columns.如果添加更多列,它将突破流量,因为它超过了连续12列的限制.

我们如何更改我的CSS中的代码以补偿函数30px末尾的calc()代码,可以在CSS中有一些东西使其在没有的情况下工作30px.所以它可以通过20px排水沟而不是那个来计算 30px

现在这些列的左右边距10px创建了20px排水沟.这就是10px为补偿添加额外的沟槽宽度的原因.

我们可以使用margin-right: 20px列而不是左侧和右侧的两个边距(并且最后一列没有边距).在这种情况下,我们不需要添加额外的10px.

工作演示.