css - 两列中的响应式“列表”

Question

我正在尝试构建两种类型的项目的列表，我们称它们为绿色和红色。在低于 980 的分辨率中，我希望它们堆叠在一列中，在高于 980 的分辨率中，我希望它们堆叠在两列中。

这是我到目前为止得到的：http: //kristofferk.se/list-test/ （玩弄你的浏览器宽度来查看一/两列的东西。）

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

谢谢！

Answer 1

您可以通过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;
}

Answer 2

你可以这样写：

.in {
    clear: right;
    color: green;
    float: right;
}
.in + .in {
 margin-bottom:-30px;
}