css - 两列响应 "list"

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 clear:right 垂直空间将被删除....

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