float:none;不使用媒体查询

Question

我正在学习有关响应式设计的教程，当我尝试将 float 属性设置为 none 以针对具有 (max-width: 625px) 的部分进行媒体查询时a class 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应该是浮动设置为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;
    }

float:none;不使用媒体查询

float:none; not working with media queries

html

css

css-float

media-queries