2

我正在为我的公司创建一个非常简单的模板，其中包括一个简单的网格系统。我正在按照本教程创建所述系统：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%; }

有谁知道我可能哪里出错了？我认为这可能是超级超级简单的事情，但我觉得我正确地遵循了该教程。

我感谢你们的任何和所有帮助，感谢您花时间阅读并回复。

4

1 回答 1

2

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

于 2013-08-02T21:28:22.990 回答