1
我正在爲我的公司創建一個非常簡單的模板，其中包含一個簡單的網格系統。我正在按照這個教程來創建所述系統：http://css-tricks.com/dont-overthink-it-grids/創建一個簡單的CSS網格
那麼我已經寫了一些代碼，並修改了一下，並且我所有的列都在網格中一起運行。我試圖在每列的左邊添加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%; }
不任何人有任何想法，我可能會出錯？我認爲這可能是超級超級簡單的東西，但我覺得我正確地遵循了這個教程。
我很感謝您的任何和所有幫助，感謝您花時間閱讀本文並回復。
[class * ='col-']這太無用了。可能只有多個類。 – user1721135
你的'html'中的'grid-pad'在哪裏？ – Vector