CSS动态创建列答案

【问题标题】：CSS to dynamically create columnsCSS动态创建列
【发布时间】：2014-08-07 19:46:29
【问题描述】：

我有三个<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+）？

【问题讨论】：

嗯...所以您想在较小的屏幕上进行垂直布局，在较宽的屏幕上进行水平布局？是否有任意数量的div？如果没有，您可以使用媒体查询和 CSS 转换进行一些手动放置。
噢，CSS 列呢？我不认为它会在
只有这三个 div。是的，我在考虑媒体查询。我是否需要用<div> 将 A 和 B 包围起来，这样我才能控制它们的组合布局？
好吧，CSS 列将是“最干净”的方式，但鉴于您需要尽可能多的支持，将 A 和 B 放在父 div 中是最好的选择。但请记住，
一切都取决于你对 Medium 和 Small 的定义，这里有一个超级准系统版本codepen.io/evanrbriggs/pen/cpwoj 带有媒体查询。

标签： css dynamic-columns

【解决方案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

【讨论】：

谢谢！实际上，如果您将 +/- 一个或两个像素悬停在 900px 标记周围，则由于您放置在框上的边框，所以顶行显示的是 AB 而不是 AC。有没有办法降低要求的准确性？例如。我们可以改用max-width 吗？

【解决方案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/

【讨论】：

谢谢！这正是我所追求的。
顺便说一句，我在最大宽度上使用了max-width: 925px 来说明块之间的额外空间。由于您使用的是display: inline-block;，因此块之间会有一些额外的空间。