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

时间:2014-03-07 09:31:14

标签: html css css3 grid-system

有没有人知道要将第div项放在第一行中col-3-12,而offset-6-12类的偏移量为offset-9-12body { 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); } 为我的网格系统的右侧jsFiddle

CSS:

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

HTML:

{{1}}

1 个答案:

答案 0 :(得分:9)

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

margin-left的值等于:

  • 第一列,其本身没有左边距width previous columns + the gutter width

  • 第二列(其他列

    • 如果列有左/右margin(创建装订线):
      width + previous columns + the gutter width的{​​{1}}。 (由于列的左/右1/2 gutter width为沟槽宽度的1/2,因此 CSS grid system: columns having left and right margins

    • 如果列没有margin(即只有margin-left创建了装订线): margin-right + width的{​​{1}}。 CSS grid system: columns having right margin

例如:

  • 对于第一列,我们按如下方式计算previous columns的左边距:
the gutter width

<强> WORKING DEMO

注意:我在这里使用了多个选择器,以便拥有更高的 specificity value

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

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

由于该列具有左(和右)边距(等于阴沟的1/2(.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-*

<强> UPDATED DEMO 即可。 (Sassy方式: Sass version

注意

对于第二列,您应该使用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 */ } 列。

即。 您应该计算列数,包括偏移量 例如:offset-6 + col-3 = col-3。如果添加更多列,它将会超过连续12列的限制而中断流程。


  

我们如何更改CSS中的代码以补偿col-3 including offset-6上的代码   12 columns函数的结束,CSS中可能存在某些内容   在那里使其工作没有30px。所以它可以通过计算   calc() gutter而不是30px

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

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

<强> WORKING DEMO