ウィンドウが狭いときは1行に1つのdivがあり、幅が広いときは行ごとにdivが多くなります

Question

{float：left}を使用してページに複数の独立したボックスがあります。彼らが邪魔することはもうありません。

ウィンドウが狭い場合は、ボックスを{width：100％}にします。ウィンドウが2つのボックスを横に並べるのに十分広い場合、ボックスを{width：50％}にしたいと思います。

これを行うにはどうすればよいですか？

Answer 1

唯一の実質的な答えは、これまでのところ、私が働いて取得する方法を見つけ出すことができない、メディアクエリを使用してきました。ここで私が見つけた解決策があります：

<div class="columns"> 
    <div class="box"> 
     <p>A bunch of stuff in the box.</p> 
    </div> 
</div> 

は、次にそれにいくつかのCSSを添付：どんなに多くの箱、

div.columns { 
    column-width: 300px; 
} 
div.box { 
    display: inline-block; 
    width: 100%; 
} 

これは完璧ではないではありませんが、それは100％の幅でコンテンツを保持しますどの画面サイズでも横に揃えることができ、div.columnsの列幅を使用してボックスの幅を狭めることを制御できます。

Answer 2

あなたの質問はかなり曖昧ですが、およそResponsive Design

Answer 3

を求めているように聞こえる私はこれを達成するための正しい方法は、メディアクエリを使用していると思います。

インスピレーションのために（または単に使用する）は、グリッド・システムは、ブラウザウィンドウの現在のサイズに調整して、私の意見では本当によく働くhttp://cssgrid.net

チェックアウトすることができます。あなたがカスタマイズしたものを望むならば、彼らのCSSはかなり良い例です。

Answer 4

メディアクエリ：

@media screen and (min-width:600px){ 
    div{width:50%; float:left;} 
} 

Demo