css - CSS动态创建列

Question

我有三个<div>要素：

<div class="foo">A</div>
<div class="foo">B</div>
<div class="foo">C</div>

期望的行为

随着屏幕尺寸的变化，我想编写一些 CSS 来创建以下效果：

不良行为

我知道如何实现以下（不希望的）行为：

div.foo {
   display: inline-block;
   vertical-align: top;
   width: 300px;
}

有没有一种简单的方法（最好没有任何 Javascript 库）来实现我想要的在主流浏览器（Chrome、Safari、Firefox、IE9+）上工作的行为？

Answer 1

如果没有额外的包装器 div 和媒体查询，我认为这是不可能的。

HTML：

<div class="box-wrap">
  <div class="box">a</div>
  <div class="box">b</div>
</div>
<div class="box">c</div>

CSS：

.box {
  border: 1px solid #000;
  float: left;
  height: 300px;
  width: 300px;
}

.box-wrap {
  float: left;
  width: 300px;
}

@media (min-width: 900px) {
  .box-wrap {
    width: auto;
  }
}

演示：http ://codepen.io/sdsanders/pen/zLFJj

Answer 2

将 A 和 B 包装到它自己的容器中。

<div class="foo-wrap">
    <div class="foo">A</div>
    <div class="foo">B</div>
</div>
<div class="foo">C</div>

然后使用媒体查询来控制 A/B 列在小屏幕上的显示：

.foo-wrap {
    display: inline-block;
}

div.foo {
   display: inline-block;
   vertical-align: top;
   width: 300px;
}

@media all and (max-width: 925px) {
    .foo-wrap {
        width: 300px;
    }
}

演示：http: //jsfiddle.net/axertion/j48da85n/1/