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

Question

有没有人知道抵消前两个divs，它们位于侧行，具有col-3-12 类，偏移量为offset-6-12 和offset-9-12，位于我的网格系统的右侧@ 987654321@

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 的值等于：

• 对于本身没有左边距的第一列：previous columns + the gutter width 的width。

• 对于第二列（其他列）：

  • ^{如果列有左/右 margin（这会创建装订线）：}
    width 的 previous columns + the gutter width + 1/2 gutter width。 （因为这些列的左/右 margin 是排水沟宽度的 1/2）

  • ^{如果该列没有margin-left（即，装订线仅由margin-right创建）：}
    previous columns + the gutter width 的 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。}

还请注意，由于列是浮动的，因此您只需对第一列使用 .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 列的限制。

---

我们如何更改我的 CSS 中的代码以弥补 30px 上的 calc() 函数的结尾，CSS 中有什么东西吗？ 在那里让它在没有30px 的情况下工作。所以它可以通过计算 20px 排水沟而不是 30px

现在列的左右边距为10px，这会创建20px 装订线。这就是为偏移量添加额外的10px 到装订线宽度的原因。

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

WORKING DEMO.