css - 2列のレスポンシブ「リスト」

Question

2 種類の項目のリストを作成しようとしています。それらを緑と赤と呼びましょう。解像度が 980 未満の場合は 1 列に並べ、解像度が 980 を超える場合は 2 列に並べます。

これは私がこれまでに得たものです: http://kristofferk.se/list-test/ (ブラウザーの幅をいじって、1/2 列のものを確認してください。)

私の質問: CSS だけを使用して (間に垂直方向のスペースを入れずに) 項目を積み重ねる簡単な方法はありますか? jQueryなどには興味がありません。

ありがとう！

score 0 · Accepted Answer

次のように書くことができます。

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

score 0 · Accepted Answer

CSS メディアクエリを使用して結果を得ることができます。

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

更新しました

clear:rightを.in クラスに与えるだけで、垂直方向のスペースが削除されます....

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

2 に答える 2