Question

我正在为我的公司创建一个非常简单的模板，其中包含一个简单的网格系统。我正在按照本教程创建所述系统：http://css-tricks.com/dont-overthink-it-grids/

我已经编写了一些代码，并对其进行了一些修改，并且我的所有列都在网格中一起运行。我试图在每列的左边添加20像素的填充，但似乎这不起作用。

您可以在此处查看我的HTML和CSS的实时版本： http://jsfiddle.net/EQ67e/

这是我的HTML代码：

<body class="container center">
    <div class="grid">
        <div class="col-1"></div>
    </div><!-- .grid -->

    <div class="grid">
        <div class="col-1-3"></div>

        <div class="col-2-3"></div>
    </div><!-- .grid -->

    <div class="grid">
        <div class="col-1-2"></div>

        <div class="col-1-2"></div>
    </div><!-- .grid -->

    <div class="grid">
        <div class="col-1-3"></div>

        <div class="col-1-3"></div>

        <div class="col-1-3"></div>
    </div><!-- .grid -->

    <div class="grid">
        <div class="col-1-4"></div>

        <div class="col-1-4"></div>

        <div class="col-1-2"></div>
    </div><!-- .grid -->

    <div class="grid">
        <div class="col-1-4"></div>

        <div class="col-1-4"></div>

        <div class="col-1-4"></div>

        <div class="col-1-4"></div>
    </div><!-- .grid -->

    <div class="grid">
        <div class="col-1-8"></div>

        <div class="col-1-8"></div>

        <div class="col-1-8"></div>

        <div class="col-1-8"></div>

        <div class="col-1-4"></div>

        <div class="col-1-4"></div>
    </div><!-- .grid -->

    <div class="grid">
        <div class="col-1-8"></div>

        <div class="col-1-8"></div>

        <div class="col-1-8"></div>

        <div class="col-1-8"></div>

        <div class="col-1-2"></div>
    </div><!-- .grid -->

    <div class="grid">
        <div class="col-1-8"></div>

        <div class="col-1-8"></div>

        <div class="col-1-8"></div>

        <div class="col-1-8"></div>

        <div class="col-1-8"></div>

        <div class="col-1-8"></div>

        <div class="col-1-8"></div>

        <div class="col-1-8"></div>
    </div><!-- .grid -->
</body><!-- .container -->

这是CSS：

@charset "UTF-8";

/*
 * Global
 */
html, html a { 
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);

    font-smooth: always;
    -webkit-font-smoothing: antialiased;
}

body { 
    font-size: 1em;

    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.left { float: left; }

.right { float: right; }

.center { margin: 0 auto; }

/* Typography */
h1 { font-size: 2em; }

h2 {    font-size: 1.75em; }

h3 { font-size: 1.25em; }

h4 { font-size: 1em; }

ul { list-style: none; }

ul li { display: inline; }

img { border: none; }

strong { font-weight: bold; }

em { font-style: italic; }

input { -webkit-appearance: none; }

a:active, a:active *,
a:focus, a:focus *,
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
    -moz-outline-style: none;
}

/* Selection Styles */
*::selection {
    background: #666;
    color: #fff;
}

*::-moz-selection {
    background: #666;
    color: #fff;
}

*::-webkit-selection {
    background: #666;
    color: #fff;
}

/* Grid */
*, *:after, *:before {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.grid { 
    background: #ccc;
    margin: 0 0 20px -20px; 
}

.grid:after {
    clear: both;
    content: "";
    display: table;
}

/* Grid Gutters */
[class*='col-'] {
    background: red;
    float: left;
    height: 25px;
    padding-left: 20px;
}

.grid-pad { padding: 20px 0 20px 20px; }

.grid-pad [class*='col-']:last-of-type { padding-right: 20px; }

/* Grid Columns */
.col-1 { width: 100%; }

.col-2-3 { width: 66.66%; }

.col-1-2 { width: 50%; }

.col-1-3 { width: 33.33%; }

.col-1-4 { width: 25%; }

.col-1-8 { width: 12.5%; }

有没有人知道我哪里出错了？我认为它可能超级简单，但我觉得我正确地遵循了该教程。

感谢各位朋友的帮助，感谢您花时间阅读并回复。

Answer 1

您的填充物存在于物品上，您没有看到它，因为您有红色背景并且填充物在盒子内部工作。如果您添加边距而不是填充，您将看到间隙，因为边距在框外工作。现在，因为您将左侧的列浮动，所以无法在左侧向对象添加填充。你可以通过在容器类上添加margin-left或padding-left来实现。

创建一个简单的CSS网格

1 个答案: