質問: いつもお世話になります。 正方形のボックスを積み上げた、ピラミッドを作成しました。 レスポンシブ対応させたいのですが、方法が思いつかず悩んでおります。 (現状、画面幅を狭めると、ピラミッドが崩れる。) ピラミッドの右側にある「★」ボックスも、 位置を維持したまま、レスポンシブさせたいです。 崩れないようにするには、どのようにすれば良いでしょうか。 また、正方形のサイズを変更すると、 CSSでボックス位置を調整しなければなりません。 もし、位置調整しなくても良い方法があれば、 こちらも併せてご教示頂けますと幸いです。 よろしくお願いいたします。 ``` ``` ``` .cf:after { clear: both; content: ''; display: block; } .bottom_wrap { position:relative; width:100%; max-width:550px; margin:0 auto; } .bottom_wrap .play_block { float:left; margin:0 50px 0 0; } .bottom_wrap .play_block ul { font-size:0; } .bottom_wrap .play_block li { display:inline-block; cursor:pointer; } .bottom_wrap .play_block .stage_5 { margin:0 0 0 140px; } .bottom_wrap .play_block .stage_4 { margin:0 0 0 105px; } .bottom_wrap .play_block .stage_3 { margin:0 0 0 70px; } .bottom_wrap .play_block .stage_2 { margin:0 0 0 35px; } .bottom_wrap .star{ float:left; position:absolute; bottom:0; right:0; cursor:pointer; } ```
回答: ``` /* Add */ .bottom_wrap .play_block li { width: 20%; /* ulの幅の20%だから、ulにmarginが有ると上手くいかな無いので後で消す */ } li > img { width: 100%; } .bottom_wrap .play_block ul { margin: 0 !important; /* 上記コメントの理由からmarginを消しているだけ */ text-align: center; } /* ↓テスト表示用 */ .bottom_wrap .play_block { float: none !important; } ``` **動くサンプル:**