0

CSS、グリッドの学習を始めたばかりで、問題が発生しています。

コード -

HTML -

<body>
    <div class="page-wrap">
        <h1>Grid</h1>
        <div class"grid">
            <div class="col col-2-3"> Test </div>
            <div class="col col-1-3"> Test </div>
         </div>
    </div>
</body>

そしてCSS

body {
    background-color: white;
}

.page-wrap {
    width: 80%;
    margin: 30px auto;
    background: grey;
}

.grid {
    overflow: hidden;

    .col {
        float: left:
    }
}

.col-2-3 {
    width: 66.66%;
    background: red;
}

.col-1-3 {
    width: 33.33%;
    background: blue;
}
}

なぜフロート：左; 適用されていませんか？ ビデオを一時停止します。これは本来あるべき姿ですが、私には合いません。.col { float: left } の部分を削除して float: left; を適用するとうまくいきました。.col-1-3 と .col-2-3 の両方に。それ以外は、私が間違ったことを見つけることができません。clearfix「ハック」をグーグルで検索しましたが、適用方法がわかりませんでした。前もって感謝します。

4

5 に答える 5

4

基本的なフロートの問題はこれです:float: left;代わりにfloat: left:

于 2013-05-07T20:00:13.347 に答える
1

定義にタイプミスがあり.colます -float: left:あるべきですfloat: left;(セミコロンがあるべきところにコロン)。

于 2013-05-07T19:59:46.260 に答える
0

まず、css を修正します。

body {
    background-color: white;

}

 .page-wrap {
    width: 80%;
    margin: 30px auto;
    background: grey;
}

.grid {
    overflow: hidden;
}
.col {
    float: left; /* should be ; and not : */
}

.col-2-3 {
    width: 66.66%;
    background: red;

}

.col-1-3 {
    width: 33.33%;
    background: blue;
}

これは正常に機能するリンクです。

于 2013-05-07T19:57:27.083 に答える
0

CSS にエラーがあります。

  1. プロパティを別のプロパティ内にネストしています。

    .grid {
    overflow: hidden;
    .col {
        float: left:
    }
}

    .colの外にあるようにこれを変更する必要があり.gridます。

    .grid {
    overflow: hidden;
}
.col {
    float: left:
}

  2. 内の属性の終了セミコロンの入力を間違えました.col。

    float: left:

    する必要があります...

    float: left;
于 2013-05-07T20:01:42.607 に答える