有谁知道如何制作20px or 1em下面的网格系统的排水沟？

我得到了所有的div全部排成一行，但我想知道如何在每个 div 之间添加装订线。我这样做是为了了解网格是如何制作的。jsFiddle 在这里.

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

.row { width:100%; }

.row > [class*='col-'] { /* ... */ }
.row > [class*='col-']:last-of-type { /* ... */ }

[class*="col-"] {
    float:left; 
    height:200px;
    background-color: #dedede;
    border: 1px solid #000;
    padding-right:20px;
}

[class*=col-]:last-of-type {
    padding-right:0px;
}

.col-1-12 {
    width: calc(100% / 12);
}

.col-2-12 {
    width: calc(100% / 12 * 2);
}

.col-3-12 {
    width: calc(100% / 12 * 3);
}
.col-4-12 {
    width: calc(100% / 12 * 4);
}

HTML:

<div class="row">
    <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 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>

好吧，这是列宽的计算，基于列数，考虑到装订线20px每列之间。

例如，col-2-12:

width: calc( (100% - (12/2 - 1) * 20px) / 12 * 2 );

解释：

width:
    (100%   /* Total width */
      - (12/2 - 1) * 20px /* Number of gutters between col-2  x  gutter width */
    ) / 12 /* Total columns */
      * 2  /* Size of the current column which is col-2 */

另外，不要使用margin对于第一列和最后一列，您可以使用padding对于容器.row并设置margin对于该列0.

另外，由于柱子是浮动的，所以应该清除柱子底部的浮动。.row元素。

.row {
    padding: 0 20px;
    *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; }

工作演示.

时髦的CSS

使用 CSS 预处理器，例如Sass，让网格系统的计算变得有趣！

这是一种时髦的方式流体网格系统:

$total_columns : 12;
$total_width   : 100%;
$gutter_width  : 2%;

.row {
    padding: 0 $gutter_width;
    *zoom: 1;

    &:after, &:before { content: ' '; display: table; }
    &:after { clear: both; }

    & > [class*='col-']:first-child { margin-left: 0; }
    & > [class*='col-']:last-child { margin-right: 0; }
    & > [class*='col-'] { margin: 0 $gutter_width/2; }
}

[class*="col-"] {
    float:left; min-height:200px;
    background-color: #dedede; border: 1px solid #000;
}

@for $i from 1 through $total_columns {
    .col-#{$i}-#{$total_columns} {
        width: (100% - ($total_columns/$i - 1) * $gutter_width) / $total_columns * $i;
    }
}

在线演示.