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

是否有人知道要偏移侧行中的前两个

div

col-3-12类，偏移量为

offset-6-12

和

offset-9-12

，位于我的网格系统的右侧

CSS:

正文{
字体：20px/1.2 Verdana，Arial；填充：0px；边距：0px；
}
*，*：之后，*：之前{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.集装箱{
填充：20px 20px 0 20px；背景色：红色
}
.行{
填充：0；
*缩放：1；
}
.行：之后，.行：之前{
内容：''；
显示：表格；
}
.罗：之后{
明确：两者皆有；
}
.row>[class*='col-']：第一个孩子{
左边距：0；
}
.row>[class*='col-']：最后一个子级{
右边距：0；
}
.row>[class*='col-']{
/*编辑这里*/
利润率：0px 10px 20px 10px
}
[类别*=“列-”]{
浮动：左；
高度：300px；
背景色：#dedede；
边框：1px实心#000；
}
[类别*=列-]：类型的最后一个{
}
.col-1-12{
宽度：计算（（100%-（12/1-1）*20px）/12*1）；
}
.col-2-12{
宽度：计算（（100%-（12/2-1）*20px）/12*2）；
}
.col-3-12{
宽度：计算（（100%-（12/3-1）*20px）/12*3）；
}
.col-4-12{
宽度：计算（（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>

在沃鲁帕特·维利特·埃塞的《雷德亨德瑞特》中，两人或两人互为受害者
纤毛多洛雷欧盟福吉亚无巴黎。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
但是，在最低限度上，我们需要一个实验室来进行日常工作。
在沃鲁帕特·维利特·埃塞的《雷德亨德瑞特》中，两人或两人互为受害者
纤毛多洛雷欧盟福吉亚无巴黎。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
但是，在最低限度上，我们需要一个实验室来进行日常工作。
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。
但是，在最低限度上，我们需要一个实验室来进行日常工作。

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

的值等于：

• 对于本身没有左边距的第一列：前几列的

  宽度

  +边沟宽度

• 对于第二列（其他列）：
  • 如果列具有左/右

    边距（创建边沟）：
    
    前面列的
    宽度
    ，
    +
    排水沟宽度
    +
    1/2排水沟宽度
    。（因为列的左/右
    边距
    为檐槽宽度的1/2）
    

  • 如果列没有

    左边距

    （即仅由

    右边距

    创建边沟）：
    

    前面列的
    宽度
    ，

    +

    排水沟宽度

    。

例如：

• 对于第一列，我们计算

  .offest-6

  的左边距，如下所示：

.row[class*=“col-”]：first-child.offest-6-12{
左边距：计算（（100%-（12/6-1）*20px）/12*6）+20px）；
/*| col-6-12的宽度|+排水沟宽度*/
}

注意：为了获得更高的，我在这里使用了多个选择器

还要注意的是，由于列彼此相邻浮动，您只需对第一列使用

.offset-*

类即可将它们推到右侧

• 对于具有左（和右）边距的第二列（其他列）：

因为列具有左（和右）边距（等于边距的1/2=

10px

）

.row[class*=“col-”]。offest-6-12{
左边距：计算（（100%-（12/6-1）*20px）/12*6）+20px+10px）；
/*| col-6-12的宽度|+（1+1/2）排水沟宽度*/
}

。（时髦的方式：）

注 对于第二列，您应该使用偏移量-6，因为在当前列之前还有另一列

col-3

也就是说，您应该计算列数，包括偏移量
例如：

col-3

+

col-3，包括偏移量-6

=

12列

。如果您添加更多列，它将中断流，因为它超过了一行中12列的限制

---

我们如何更改CSS中的代码来补偿上的

30px

calc（）

函数的末尾，CSS中是否有 在那里，它可以在没有

30px

的情况下工作。所以它可以通过

20px

gotter而不是

30px

现在，列的左右边距为

10px

，这将创建

20px

边沟。这就是在排水沟宽度中添加额外的偏移量

10px

的原因

我们可以对列使用

marginright:20px

，而不是对左侧和右侧使用两个边距（最后一列没有边距）。在这种情况下，我们不需要添加额外的

10px

---

谢谢您的回复，我试图将同一行添加到偏移量-9-12，但该行分成两行。如何获得第二个o