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