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>

响应式设计：浮动块

1 个答案: