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

Question

有谁知道偏移前两个 div 是在侧行中具有类 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

好吧，对于偏移量，您需要对 float 列应用左边距以将它们推到右侧。

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 */
}

WORKING DEMO .

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

另请注意，由于列彼此相邻 float ，因此您只需要使用 .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 */
}

UPDATED DEMO 。 (时髦的方式: Sass version )

注意事项

对于第二列，您应该使用 offset-6因为还有一个col-3当前列之前的列。

即您应该计算列数，包括偏移量。
例如:col-3 + col-3 including offset-6 = 12 columns .如果您添加更多列，则会中断流程，因为它超过了连续 12 列的限制。

---

How can we change the code in my CSS to compensate for that 30px on the end of the calc() function, can there be something in the CSS that's in there to make it work without the 30px. so it can calculate by the 20px gutter instead of that 30px

现在列的左右边距为 10px这创建了 20px排水沟。这就是添加额外 10px 的原因到排水沟宽度以进行偏移。

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

WORKING DEMO .