3

Does anyone know to offset the first two divs that are in side row that have the class col-3-12 to have an offset of offset-6-12 and offset-9-12 to be on the right side of my grid system 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>
4

1 回答 1

9

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

的值margin-left等于：

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

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

    • 如果列有左/右margin（创建排水沟）：
      的++。（因为列的左/右为排水沟宽度的 1/2） widthprevious columnsthe gutter width1/2 gutter widthmarginCSS网格系统：具有左右边距的列

    • 如果该列没有margin-leftmargin-right（ 即排水沟仅由创建）
      ：+width。previous columnsthe gutter widthCSS网格系统：具有右边距的列

例如：

  • 对于第一列，我们计算左边距.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 */
}

更新演示。（野蛮之道：Sass 版）

笔记

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

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

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

现在，这些列有一个左右边距，10px其中创建了20px装订线。这就是为偏移量添加额外10px的排水沟宽度的原因。

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

工作演示。

于 2014-03-07T10:07:53.340 回答