Question

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

main

以下是完整的html和css代码：jsfiddle（我在这些相同的媒体查询规则中为/* 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; }添加了蓝色并为section.main添加了绿色 - 设置以确保它们对html有效并使其易于在页面中找到。

当float设置为none时，应该垂直堆叠这三个绿色section.main aside div.content。

Answer 1

这里：JSfiddle我编辑了你的小提琴，想出了这个。希望这个样本有所帮助。

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;
    }

浮动：无;不使用媒体查询

1 个答案: