用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+）上正常运行？

- ᴇʟᴇvᴀтᴇ

---

嗯...所以你想在较小的屏幕上使用垂直布局，在较宽的屏幕上使用水平布局？div的数量是任意的吗？如果不是，你可以使用媒体查询和CSS变换进行手动布局。 - Jason

哦，那CSS列又怎么样呢？我认为它在<IE10上不起作用，但也许可以得到一个不错的效果。 - Jason

只需要那三个 div。是的，我在考虑媒体查询。你觉得我需要用 <div> 包围 A 和 B 吗，这样我就可以控制它们的组合布局了吗？ - ᴇʟᴇvᴀтᴇ

CSS列布局是最“干净”的方法，但由于希望获得尽可能多的支持，将A和B放置在父级div中可能是最好的选择。请记住，媒体查询不被<IE9支持，因此您确实需要一些JavaScript来在IE8中实现相同的效果（可能使用Modernizr）。 - Jason

一切都取决于你对中等和小型的定义是什么，这是一个超级简洁版本，使用媒体查询，请查看此链接：http://codepen.io/evanrbriggs/pen/cpwoj。 - Evan

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;
  }
}

Demo: http://codepen.io/sdsanders/pen/zLFJj

- Steve Sanders

---

谢谢！实际上，由于您在框上放置了边框，如果您在900像素左右悬停+/-一个像素或两个像素，则顶行会显示AB而不是AC。有没有办法使其要求更少的精确度？例如，我们可以使用max-width吗？ - ᴇʟᴇvᴀтᴇ

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/

- Axel

---

谢谢！这正是我想要的。 - ᴇʟᴇvᴀтᴇ

顺便提一下，我在max-width上使用了925px来考虑块之间的额外空间。由于您正在使用display: inline-block;，因此块之间会有一些额外的空间。 - Axel