html - float :none; not working with media queries

Question

我正在学习有关响应式设计的教程，并尝试将 float 属性设置为 none 以针对 (max-width: 625px) 的媒体查询) 对于具有类 main 的部分，如以下规则集:

/* Section main */

section.main {
    background-color: blue;
    width: :100%;
    float: none;
    text-align: left;
}

section.main aside div.content {
    background-color: green;
    margin: 8px 20px 8px 0;
    padding: 5px 0px 10px 85px;
    background-size: 50px 50px;
    background-position: 20px 5px;
}

这里是完整的 html 和 css 代码:jsfiddle (我在这些相同的媒体查询规则集中将蓝色添加到 section.main 并将绿色添加到 section.main aside div.content 以确保它们确实对 html 有影响，并使其易于在页面中定位。

这三个绿色 div 应该在 float 设置为 none 时垂直堆叠。

Answer 1

此处:JSfiddle我编辑了你的 fiddle 并想出了这个。希望这个示例对您有所帮助。

section.main aside {
      float: none;
    display: block;
    width: 100%;
    }
    section.main aside div.content {
        background-color: green;
        margin: 8px 20px 8px 20px;
        padding:20px 15px;
    text-align: center;
        background-size: 50px 50px;
        background-position: 20px 5px;
    }