如何偏移CSS网格系统中的div列 [英] How to offset div columns in CSS grid system

问题描述

有没有人知道偏移侧面行中具有类 col-3-12 div $ c>的偏移量为 offset-6-12 和 offset-9-12 我的网格系统侧面 。

_{注意：我在这里使用多个选择器，以获得更高的 具体值 。}

另请注意，由于列彼此相邻，您只需要请使用第一列的 .offset - * 类别将它们推向右侧。

（其他栏）

由于列有左（和右）边距（等于1/2的gutter = 10px ）

  .row [class * =col  - ]。offest-6-12 {
 margin-left：calc （（（100％ - （12/6 -1）* 20px）/ 12 * 6）+ 20px + 10px）; 
 / * |宽度为col-6-12 | +（1 + 1/2）gutter width * / 
} 
  

a href =http://jsfiddle.net/hashem/c6R6t/5/>更新的演示 。 （厚脸皮的方式： Sass版本 ）

注意

对于第二列，您应该使用 offset-6 col-3 列。

您应该计算列的数字，包括偏移量。

例如： col-3 + col-3包括offset-6 = 12列。如果您添加更多列，则会中断流程，因为它超过了一行中的12列限制。

---

我们如何改变CSS中的代码以补偿
上的 30px 结束 calc （）函数，可以在CSS中有一些东西在
在那里，使其工作没有 30px 。所以它可以通过
20px gutter而不是 30px

现在列的左右边距为 10px ，创建 20px gutter。这是为偏移量添加额外 10px 的原因。

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

工作演示 。

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>

解决方案

Well, for the offset, you need to apply a left margin to floated columns to push them to the right side.

The value of the margin-left is equal to:

• for the first column which doesn't have a left margin itself: the width of previous columns + the gutter width.

• for the second column (the other columns):

  • ^{If the column has a left/right margin (which creates the gutter):}
    The width of previous columns + the gutter width + 1/2 gutter width. (As the columns have a left/right margin of 1/2 of the gutter width)

  • ^{If the column doesn't have margin-left (i.e. the gutter is created only by margin-right):}
    The width of previous columns + the gutter width.

For instance:

• for the first column we calculate the left margin for .offest-6 as follows:

.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.

_{Note: I used multiple selectors here in order to have a higher specificity value.}

Also note that as the columns are floated next to each other, you only need to use the .offset-* class for the first column to push them both to the right side.

• And for the second column (The other columns) which has left (and right) margin(s):

Since the column has a left (and right) margin (equals 1/2 of the gutter = 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. (The Sassy way: Sass version)

Note

For the second column, you should use offset-6 because there is another col-3 column before the current column.

I.e. You should count the columns' numbers including the offsets.
For instance: col-3 + col-3 including offset-6 = 12 columns. If you add more columns, it'll break the flow as it exceeds the limit of 12 columns in a row.

---

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

Now the columns have a left and right margin of 10px which creates the 20px gutter. That's the reason of adding an extra 10px to the gutter width for offsets.

We could use margin-right: 20px for the columns instead of two margin for left and right side (and no margin for the last column). In this case, we wouldn't need to add the extra 10px.

WORKING DEMO.

这篇关于如何偏移CSS网格系统中的div列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！