如何将 div 定位为 3 列，在窄屏幕上重新定位为 2答案

【问题标题】：How do I position divs into 3 columns, reposition into 2 when on narrow screen如何将 div 定位为 3 列，在窄屏幕上重新定位为 2
【发布时间】：2013-05-13 21:44:22
【问题描述】：

是的，我确实意识到这个问题的标题很糟糕。随时改进它。

我正在尝试为具有以下要求的页面构建 CSS。

有六个“盒子”。
每对盒子的总高度相等
中间对（框 3 和框 4）具有相同的高度
它们应该按照下面的模型排列，在宽屏幕上的三列中
它们应该像下面的第二个模型那样排列在两列中
在非常窄的屏幕上，它们应该全部排列在一个列中
盒子与其正下方/正上方的盒子之间不应有间隙
我曾尝试使用 Twitter Bootstrap 来完成它，但这不是必需的
与 CSS+JQuery/其他 JS 解决方案相比，我更喜欢 100% CSS 解决方案
这是一个企业网站，很遗憾，必须在 IE8+ 中工作（IE7 也不错，但如果我们可以有一个合理的后备方案，这不是必须的）

这里有一个 jsFiddle 供你使用：http://goo.gl/o2YoY

【问题讨论】：

考虑发布任何代码片段。 whathaveyoutried.com
公平点。我构建了我当前（可怜的）进度的“演示”版本并将其放在 jsfiddle
一定要按那个顺序还是可以改变盒子的顺序？
两列的总高度必须相同。 @invisal

标签： css web-applications twitter-bootstrap responsive-design

【解决方案1】：

您可以结合使用column-count 和媒体查询来做到这一点：

.inner{
    width: 100%;
    display: inline-block;
}

#outer{
    column-count:3;
    -webkit-column-count:3; /* Safari and Chrome */
    -moz-column-count: 3; /* Firefox */
}

@media (max-width: 600px) {
      #outer{
        column-count:2;
        -webkit-column-count:2; /* Safari and Chrome */
        -moz-column-count: 2; /* Firefox */
    }
}

@media (max-width: 300px) {
      #outer{
        column-count:1;
        -webkit-column-count:1; /* Safari and Chrome */
        -moz-column-count: 1; /* Firefox */
    }
}

演示：http://jsfiddle.net/6wWDX/1/

column-count的浏览器兼容性：http://caniuse.com/#feat=multicolumn

【讨论】：

这很有趣。我不知道column-count。我会调查...
我更新了小提琴以解决我的其他要求（不同的高度和必须没有间隙的事实）jsfiddle.net/ycaZJ/1 在 Chrome、Firefox 和 IE10 中完美运行。可悲的是，我也必须支持旧的 IE 版本，有什么办法让它在那里工作吗？
我不知道。你可以有一个 js 后备。