レスポンシブレイアウトが上手く実現できなくて頭を悩ませています。
上のレイアウトをwidthが600px以上の時は下のレイアウトとやりたいのですがどうにも上手くできません。
上のレイアウトを基本とするとHTMLの要素の並びが赤、緑、水色、黄色になると思うのですが、
下のレイアウトは要素の並びが赤、緑、黄色、水色でないと実装が無理のような気がします。
HTMLは変えずにCSSだけでこのレイアウトを実現したいのですが何かいい方法はありますでしょうか?
また、postionは使わずに行いたいです。
HTML
1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 8 <style> 9 .box1 { 10 background-color: red; 11 width: 30rem; 12 height: 5rem 13 } 14 15 .box-container { 16 display: flex; 17 } 18 19 .box2 { 20 background-color: green; 21 width: 20rem; 22 height: 10rem; 23 } 24 25 .box3 { 26 background-color: aqua; 27 width: 10rem; 28 height: 10rem; 29 } 30 31 .box4 { 32 background-color: yellow; 33 width: 30rem; 34 height: 10rem; 35 } 36 </style> 37</head> 38 39<body> 40 41 <div class="box1"> 42 43 </div> 44 45 <div class="box-container"> 46 47 <div class="box2"> 48 49 </div> 50 51 <div class="box3"> 52 53 </div> 54 </div> 55 56 <div class="box4"> 57 58 </div> 59 60</body> 61 62</html> 63
回答1件
あなたの回答
tips
プレビュー