Question

我刚刚开始学习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;
}
}

如何应用 float：left; ？ Pause the video，这应该是它的样子，但它不适合我。如果我删除了.col {float：left}部分并应用了float：left;同时使用.col-1-3和.col-2-3。除此之外，我无法找到我做错的事。我用Google搜索了clearfix“hack”，但我不知道如何应用它。在此先感谢。

Answer 1

基本浮动问题是：float: left;而不是float: left:

Answer 2

.col定义中有一个拼写错误 - float: left:应该是float: left;（冒号应该是分号）。

Answer 3

将float: left:修改为float: left;。正如其他人提到的那样，修理你的刹车。

Answer 4

首先修复你的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;
}

这是link，效果很好。

Answer 5

你的CSS中有一些错误。

您正在将属性嵌套在另一个属性中。

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

您需要更改此设置，以便.col超出.grid。

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

您错误地在.col内的某个属性上输入了结束分号。
```
float: left:
```
应该......
```
float: left;
```

CSS Float不会工作

5 个答案: