重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

ボックスをウインドサイズに合わせて配置する方法

解決済

  • 質問者：kingfruits
  • 質問日時：
  • 回答数：1件

複数のボックスを左詰めで配置し、ウインドに収まりきらない場合は、折りかえして次の列（下の列）から配置するにはどうしたらよいでしょうか？

下記に例示す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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

  • 回答者： auty
  • 回答日時：

<div> タグは、ボックス要素なのでそのままでは常に縦に並びます。



float: left;

を加えてみてください。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございました。

通報する
お礼日時：2008/04/08 17:11

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報