1

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

我把所有的divs 都排成一排，但我想知道如何在每个 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>
4

1 回答 1

3

好吧，这里是列宽的计算，基于列号，考虑到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

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

这是流体网格系统的时髦方式：

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

在线演示。

于 2014-03-05T09:08:52.957 回答