※ ChatGPTを利用し、要約された質問です(原文:ボックスをウインドサイズに合わせて配置する方法)
ボックスをウインドサイズに合わせて配置する方法
このQ&Aのポイント
複数のボックスを左詰めで配置し、ウインドに収まりきらない場合は、折りかえして次の列(下の列)から配置するにはどうしたらよいでしょうか?
ウインド幅が900px以上なら横に3つ並んで表示。ウインド幅が900px以下、600以上なら一列目に2つ、2列目に1つ表示。ウインド幅が600px以下なら縦に3つ並んで表示。
ボックスのCSSには、width: 300px; height: 180px; の設定があります。
複数のボックスを左詰めで配置し、ウインドに収まりきらない場合は、折りかえして次の列(下の列)から配置するにはどうしたらよいでしょうか?
下記に例示すhtmlはボックスが縦に3つ並んで表示されますが、
・ウインド幅が900px以上なら横に3つ並んで表示。
・ウインド幅が900px以下、600以上なら一列目に2つ、2列目に1つ表示。
・ウインド幅が600px以下なら縦に3つ並んで表示。
のようにしたいです。
<head>
<style type="text/css">
.box{
width: 300px;
height: 180px;
border: solid 1px ;
}
</style>
</head>
<body>
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
</body>
</html>
お礼
ご回答ありがとうございました。