响应式设计：浮动块

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>