Responsive design 响应性设计：浮动块

我很好奇如何做一个具体的效果，我已经看到

这就是他们获得第三个较小列的方式（调整浏览器大小，直到它弹出第三个细列）。。。我对此感兴趣的原因是，您可能认为它位于自己的列div中，但当您缩小到2列时，小的块会回流到主浮动div列表中

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

谢谢：）

看看他们的css（朝下），你会发现他们正在使用

媒体查询。这就是您如何“响应”用户更改其浏览器宽度的方式。对于这样的事情，他们可能只是清除一个浮动元素或任何其他数量的东西。我建议您查看以下内容：

这里有一个基本的例子让你开始。调整页面大小以查看正在更改的浮动div：

CSS:

HTML:


内容
中间的
边栏
查看他们的css（朝向底部），您将看到他们正在使用
媒体查询。这就是您如何“响应”用户更改其浏览器宽度的方式。对于这样的事情，他们可能只是清除一个浮动元素或任何其他数量的东西。我建议您查看以下内容：

这里有一个基本的例子让你开始。调整页面大小以查看正在更改的浮动div：

CSS:

HTML:


内容
中间的
边栏
谢谢，我理解媒体查询我的问题是他们如何提取较小的块，否则（或当较小的块时）在块的主要流中，这对我来说需要更改html而不仅仅是css？不。他们媒体查询中的
css
正在更改所述块的外观。看看他们的代码，HTML和CSS。下面是另一个例子：。在本例中，您将看到默认情况下，main
div
的
float
设置为
left
。当浏览器调整大小时，这些浮动被设置为
none
。这有意义吗？对不起，tptcat，我真的理解-我的问题是，如果你有10个块，而块3和块8更小，那么如何将这些块放在右边自己的列中？你看到了吗？这不能用标准浮动来完成。。。或者如果可以的话我错过了什么。。。在safari中的inspector中，它显示了在调整大小时样式的变化，但它看起来像绝对定位，这肯定不是正确的方法…aaaaahhh-它使用同位素，我现在明白了。。。这是一个基于jquery的绝对定位插件：）谢谢，我理解媒体查询我的问题是关于他们是如何提取较小的块的，否则（或当较小的块时）在块的主流中，对我来说，这需要改变html而不仅仅是css？不。他们媒体查询中的
css
正在改变所述块的外观。看看他们的代码，HTML和CSS。下面是另一个例子：。在本例中，您将看到默认情况下，main
div
的
float
设置为
left
。当浏览器调整大小时，这些浮动被设置为
none
。这有意义吗？对不起，tptcat，我真的理解-我的问题是，如果你有10个块，而块3和块8更小，那么如何将这些块放在右边自己的列中？你看到了吗？这不能用标准浮动来完成。。。或者如果可以的话我错过了什么。。。在safari中的inspector中，它显示了在调整大小时样式的变化，但它看起来像绝对定位，这肯定不是正确的方法…aaaaahhh-它使用同位素，我现在明白了。。。它是一个基于jquery的绝对定位插件：）
#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;
    }

}

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