css - レスポンシブフローティング div

Question

width:50%; の 2 つの div をそれぞれ左にフロートさせています。最小幅:300px; コンテナの div サイズやコンテナがない場合の画面サイズが 600px 未満の幅の場合、当然 div 2 は div 1 の下になります。

div 2 が div 1 の下にあるとき、それらはまだ 50% の幅を持ちます..両方の div の幅を 100% にすることは可能ですか?

この例では、互いに下に移動する 3 つの div があり、最小幅のブレークポイントに到達すると 100% にサイズ変更されます。

それはまさに私が達成したいことですが、私があなたに示した財団の例からそれを理解することはできません.

score 1 · Accepted Answer

@Simon が提供するソリューションについて詳しく説明するには、

div.one{
    width:50%;
    min-width:100px;
    float:left;
}
@media screen and (max-width: 767px){
    div.one{ width:100%}
}

このフィドルを参照してください: http://jsfiddle.net/GraH9/

これは、レスポンシブデザインの概念を明確にするための素晴らしい記事でもあります。ここでの説明から学べば、将来の問題の多くが解決されると感じています。

css - レスポンシブ フローティング div