1

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

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

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

宽页布局 窄页布局

这是一个 jsFiddle 供您使用：http: //goo.gl/o2YoY

4

1 回答 1

3

您可以使用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

于 2013-05-19T02:23:37.163 回答