responsive-design - 响应式设计：浮动块

Question

我很好奇如何做我见过的特定效果......

http://hype.co.uk

这就是他们如何获得第三个较小的列（调整浏览器的大小，直到它弹出第三个细列）......这对我来说很有趣的原因是因为你会认为它在它自己的列 div 中但是当你缩小小块下降到 2 列，回流到主浮动 div 列表中。

所以我的问题......在一定大小下，它如何将较小的块元素拉到自己的列中？

谢谢 ：）

Answer 1

查看他们的 css（朝向底部），您会发现他们正在使用media queries. 这就是您“响应”用户更改浏览器宽度的方式。对于这样的事情，他们可能只是清除浮动元素或任何其他数量的东西。我建议你看看这个：http ://www.html5rocks.com/en/mobile/responsivedesign/

这是一个让您入门的基本示例。调整页面大小以查看正在更改的浮动 div：

CSS：

#pagewrap {
    padding: 5px;
    width: 960px;
    margin: 20px auto;
}

#content {
    width: 290px;
    float: left;
    padding: 5px 15px;
}

#middle {
    width: 294px;
    float: left;
    padding: 5px 15px;
    margin: 0px 5px 5px 5px;
}

#sidebar {
    width: 270px;
    padding: 5px 15px;
    float: left;
}

/* for 700px or less */
@media screen and (max-width: 600px) {

    #content {
        width: auto;
        float: none;
    }

    #middle {
        width: auto;
        float: none;
        margin-left: 0px;
    }

    #sidebar {
        width: auto;
        float: none;
    }

}

HTML：

<div id="pagewrap">
<div id="content">
    CONTENT
</div>
<div id="middle">
    MIDDLE
</div>
<div id="sidebar">
    SIDEBAR
</div>
</div>