1

HTML と CSS を使用して基本的な Web サイトを作成する方法に関するチュートリアルに従っています。チュートリアルを完了し、使用するグリッド システムで遊んでみましたが、問題が発生しています。

アイデアは、コンテナ<div>を列に配置し、それぞれに固定幅と事前定義されたガターを間に配置し、CSS クラスを使用して設定することです (たとえば、8 つの事前設定された列のグリッドがある場合は、それぞれ 4 列の幅を持つ2x.grid_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