シンプルに実現できそうな気がするのに、答えに辿り着けない状況となっています。
お助け頂けるとありがたいです よろしくお願い致します。
実現したいこと
レスポンシブcssで、画像のようにレイアウトしたいです。
各要素は幅・高さ共に可変です。
試したこと
html
1<div class="wrap"> 2 <div class="要素A"> 3 内容 4 </div> 5 <div class="要素B"> 6 内容 7 </div> 8 <div class="要素C"> 9 内容 10 </div> 11 <div class="要素D"> 12 内容 13 </div> 14</div>
css
1/* モバイル */ 2 3.wrap { 4 flex-wrap: wrap; 5 -ms-flex-wrap: wrap; 6 -webkit-flex-wrap: wrap; 7 -webkit-box-pack: justify; 8 -ms-flex-pack: justify; 9 -webkit-justify-content: space-between; 10 justify-content: space-between; 11} 12.wrap div { 13 width: 100%; 14 margin-bottom: 10px; 15} 16.要素A { 17 order: 1; 18} 19.要素B { 20 order: 2; 21} 22.要素C { 23 order: 4; 24} 25.要素D { 26 order: 3; 27} 28 29 30/* PC */ 31 32@media screen and (min-width: 768px) { 33 34 .wrap { 35 position: relative; 36 } 37 .要素A { 38 width: 100%; 39 order: 1; 40 } 41 .要素B { 42 width: 70%; 43 order: 2; 44 } 45 .要素C { 46 width: 70%; 47 order: 3; 48 } 49 .要素D { 50 width: 30%; 51 order: 4; 52 position: absolute; 53 top: calc( 要素Aの高さ + 10px ); 54 right: 0; 55 } 56 57}
orderで順番を入れ替えるだけだと
PCレイアウトの際に「要素D」の頭が「要素C」と揃ってしまう為、
position:absolute;で「要素B」と同じ高さまで持ち上げました。
問題点
上記の方法だと、(要素Bの高さ + 要素Cの高さ) < (要素Dの高さ)の場合に
要素Dが収まりきらず、親要素「wrap」からはみ出してしまいます。
ここでjavascriptを用いて高さの比較をして、大きい方の値を親要素に設定して、、とも思ったのですが
本当にその方法しか無いのか、もっとシンプルな方法があるのでは?
と感じたものの思いつかず、相談させて頂いた次第です。
アドバイス頂ければ幸いです。よろしくお願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/04/05 08:46