画面の大きさを小さくするとレイアウトが崩れてしまいます。

画面を小さくしていって、max-width: 1000px;を過ぎたらbox1とbox2のwidthが100%になるようにしたいのですが、上手くできませんので教えて頂きたいです。
この方法だとmax-width: 1000px;を過ぎたらbox1とbox2のwidthを100%には出来たのですが、画面を小さくしていく途中でbox2がbox1の下にズレてしまいます。

position:類を使うとbox2がbox1に重なってしまいます。

重なったり、下にズレたりせず初期状態を維持したまま、max-width: 1000px;を過ぎたらbox1とbox2のwidthを100%にしたいです。

わかりにくい説明で申し訳ございませんが、よろしくお願い致します。

HTML⤵︎ ︎

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>要素の配置換え</title> <link rel="stylesheet"href="base1.css"> <metaname="viewport"content="width=device-width,initial-scale=1"> </head> <body> <div id = "wrapper"> <div id = "box1"> </div> <div id = "box2"> </div> </div> </body> </html>

css⤵︎ ︎

#box1{
display: block;
background-color: red;
width: 600px;
height: 200px;
float: left;
margin-left: 168px;
margin-right: -50px;
}

#box2{
display: block;
background-color: blue;
width: 600px;
height: 200px;
float: right;
margin-left: -50px;
margin-right: 168px;
}

@media (max-width: 1000px) {
#box1,#box2{
width: 100%;
margin: 0;
}
}

175

2021/10/25 10:32

動かしてみましたが言っている意味がいまいち理解できません。ご自身でも分かりにくいという認識があるようですが、画像を付けもう少し他者から分かる表現で書いてください

yambejp

2021/10/25 11:15

質問のソースはきちんとマークダウンしたほうがよいでしょうそのまま書くと先頭の「#」が見出し行とはんだんされてしまいますので CSSがガタガタにみえます

行動規範の内容に同意します

回答1件

html
1<div id="wrapper">
2  <div id="box1"></div>
3
4  <div id="box2"></div>
5</div>

css
1#wrapper {
2  display: grid;
3  grid-template-columns: 600px 600px;
4  grid-auto-rows: 200px;
5}
6
7#box1 {
8  background-color: red;
9}
10
11#box2 {
12  background-color: blue;
13}
14
15@media (max-width: 1000px) {
16  #wrapper {
17    grid-template-columns: 1fr;
18  }
19}