两列中的响应“列表”

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 class ，垂直空间即可删除....

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

Answer 2

您可以这样写：

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