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 “hack”，但我不知道如何应用它。提前致谢。

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 回答
1

修复你的float: left:到float: left;. 正如其他人所提到的，修理你的刹车。

于 2013-05-07T20:06:28.113 回答
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 回答