css - 两列响应式“列表”

我正在尝试建立两种类型的物品的清单，我们称它们为绿色和红色。在980以下的分辨率下，我希望它们堆叠在一列中；在980以上的分辨率下，我希望它们堆叠在两列中。

这是到目前为止我得到的：http://kristofferk.se/list-test/
（随您的浏览器宽度播放，以查看一列/两列的内容。）

我的问题：是否有一种简单的方法可以仅使用CSS来使项目堆叠（之间没有垂直空间）？对jQuery等不感兴趣。

谢谢！

最佳答案

您可以通过CSS媒体查询实现结果，这是我在下面提到的大致思路：-

 @media screen and (max-width: 980px)
 {
      .class {
        background: #ccc;
      }
    }

了解有关媒体查询的更多信息：-http://webdesignerwall.com/tutorials/css3-media-queries

更新

只需在您的.in类中明确声明：垂直空间将被移除...。

.in {
    clear: right;
    color: green;
    float: right;
}