html - 中央の列の内側に 1 列を配置した 3 列のレイアウト + RWD

Question

CSS でこのレイアウトを実現する方法を見つけようとして問題が発生しています。以下の例の左側は右フロートで問題なく取得できますが、レスポンシブ Web デザインを小さな画面サイズで使用すると右側に結果が得られるようにしようとしています。

少し長い一日だったかもしれませんが、これを達成する方法がわかりません。私の主なパズルは、紫のボックスを全画面表示の右上から小さい画面サイズの右下に移動することです。

Answer 1

確認できるコードはありますか? @mediacss プロパティ について読むことができます: https://mislav.net/2010/04/targeted-css/

このようにして、画面サイズに応じてレスポンシブ デザインをカスタマイズできます。

この解決策はあなたの問題を解決するはずです、

https://jsfiddle.net/7nshG/1/

あなたはposition:relative容器に与えるべきであり、そして

position:absolute; 
bottom:0;

子divに。

Answer 2

いくつかの方法があります。最初にモバイルから設計していない (そしてレイアウトを実現するためにフロートを使用している) と仮定すると、デスクトップの仕様に合わせてレイアウトを正確にコーディングします。

モバイル ブレークポイントで、各要素を 100% 幅に設定します。水色のコンテナ内のコンテンツは、紫色のボックスをページの下に押し込みます。デスクトップ レイアウトを float でコーディングした場合は、クリアに頼る必要があるかもしれませんが、私はそうは思いません。ここにフィドルがあります：

http://jsfiddle.net/bresson/7nshG/13/

.container {
    max-width:300px
}
#blue {
    border-color: blue;
    border-style: solid;
    border-width: 1px;
    width:100%;
}
#blue p {
    margin-bottom: 20px;
}
#lightBlue {
    width:100%;
    height: 50px;
    border-color: lightBlue;
    border-style: solid;
    border-width: 1px;
}
#purple {
    border-color: purple;
    border-style: solid;
    border-width: 1px;
    height:100px;
    width:100%;
}