1

我一直在关注如何使用 HTML 和 CSS 制作基本网站的教程。我已经完成了教程，现在正在尝试使用它使用的网格系统，但我遇到了一些麻烦。

这个想法是你将容器<div>排列成列，每列都有一个固定的宽度，中间有一个预定义的装订线，然后使用 CSS 类来设置 with （例如，如果你有一个由 8 个预先设置的列组成的网格，你可以使用 2x.grid_4个类，每个类的宽度为 4 列。我希望这是有道理的。

出于某种原因，我的网格无法排列，我无法弄清楚为什么......如果这没有意义，我深表歉意，如果我解释得不好，请告诉我。

这是网格应该如何工作的工作示例。 http://www.scottydawg.co.uk/web_development/smells_like_bakin

提前感谢您，任何帮助表示赞赏。

这是我的 HTML：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gridding Test Field</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/grid.css" media="screen">
<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Nunito'>
</head>

<body>
<div class="container clearfix back">
    <div class="grid_8">
        <p class="block">12</p>
    </div>

    <div class="grid_2 alpha"><p>2</p></div>
    <div class="grid_2"><p>2</p></div>

</div>
</body>
</html>

现在的CSS：

/*
  Width: 1000px
  # Columns : 8
  Column width: 104px
  Gutter : 24px 

 */

body {
    background-color: #222;
}

.grid_1 { width: 104px; }    /* 104px */
.grid_2 { width: 232px; }    /* 232px */
.grid_3 { width: 360px; }    /* 360px */
.grid_4 { width: 488px; }    /* 488px */
.grid_5 { width: 616px; }    /* 616px */
.grid_6 { width: 744px; }    /* 744px */
.grid_7 { width: 872px; }    /* 872px */
.grid_8 { width: 1000px;  }    /* 1000px */


.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8, {
    margin: 0 20px 10px 0;
    border: 5px dotted #555;
    float: left;
    display: block;
}

p {
    background-color: rgba(25, 255, 58, 0.4);
    padding: 5px;
}

.alpha{margin-left:0px;}
.omega{margin-right:0px;}

.container{
    max-width: 1000px;
    background-color: rgba(25, 180, 238, 0.4);
    margin: auto;
}

.clear{
    clear: both;
    display:block;
    overflow:hidden;
    visibility:hidden;
    width:0;
    height:0
}

.clearfix:after{clear:both;
    content:' ';
    display:block;
    font-size:0;
    line-height:0;
    visibility:hidden;
    width:0;
    height:0
}

* html .clearfix,*:first-child+html .clearfix{zoom:1}
4

0 回答 0