ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ

質問
質問者：kingfruits ボックスをウインドサイズに合わせて配置する方法
困り度：
  • 暇なときにでも
 複数のボックスを左詰めで配置し、ウインドに収まりきらない場合は、折りかえして次の列（下の列）から配置するにはどうしたらよいでしょうか？

下記に例示す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>
質問投稿日時：08/04/08 16:41
質問番号：3932512
この質問に対する回答は締め切られました。

回答

良回答20pt
回答者：auty <div> タグは、ボックス要素なのでそのままでは常に縦に並びます。

float: left;

を加えてみてください。
種類：アドバイス
どんな人：経験者
自信：参考意見
回答日時：08/04/08 17:01
回答番号：No.1
この回答へのお礼ご回答ありがとうございました。
 
このページのトップへ