1

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

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

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

ありがとう!

4

2 に答える 2

0

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

.in {
    clear: right;
    color: green;
    float: right;
}
.in + .in {
 margin-bottom:-30px;
}
于 2012-05-18T12:39:13.610 に答える
0

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

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

メディア クエリの詳細を読む:- http://webdesignerwall.com/tutorials/css3-media-queries

更新しました

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

.in {
    clear: right;
    color: green;
    float: right;
}
于 2012-05-18T12:05:19.447 に答える