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

2023/10/15 10:20

このQ&Aのポイント

複数のボックスを左詰めで配置し、ウインドに収まりきらない場合は、折りかえして次の列（下の列）から配置するにはどうしたらよいでしょうか？
ウインド幅が900px以上なら横に3つ並んで表示。ウインド幅が900px以下、600以上なら一列目に2つ、2列目に1つ表示。ウインド幅が600px以下なら縦に3つ並んで表示。
ボックスのCSSには、width: 300px; height: 180px; の設定があります。

ベストアンサー

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

2008/04/08 16:41

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

小林 K太郎（@kingfruits）
お礼率66% (211/319)

HTML
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

auty
ベストアンサー率58% (284/486)

2008/04/08 17:01 回答No.1

<div> タグは、ボックス要素なのでそのままでは常に縦に並びます。 float: left; を加えてみてください。

質問者

お礼 2008/04/08 17:11

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

関連するQ&A

スタイルシートでボックスを中央に表示する方法
大ボックスを中央に配置してその中に、小ボックスを上から10、左から20の位置に配置させたいのですが、大ボックスが中央に配置できません。少し右側にズレてしまいます。（ソースは文章最後にあります）そこで大ボックスの　position: absolute; 　を削除すると中央に配置できるものの、小ボックスが外に飛び出してブラウザを基点とした上から10、左から20の位置に配置されてしまいます。 tableタグを使わずにCSSのみで大ボックスを中央に。その大ボックスの中に大ボックスの左上を基点として上から10、左から20の位置に小ボックスを配置する方法はないのでしょうか・・・。よろしくお願い致します。 <html> <head> <title>box</title> <style type="text/css">  </style> </head> <body> <div align="center"> 　<div class="boxL"> 　　<div class="box1">小ボックス</div> 　</div> </div> </body> </html>
- ベストアンサー
- HTML
【CSS】ウインド幅を変えた際の表示
以下のようなHTMLを用意しました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style>  </style> </head> <body> <div id="aaa">aaaaaaaaaaaaaaaaaaaa</div> <div id="bbb">bbbbbbbbbbbbbbbbbbbb</div> </body> </html> （１）ウインド幅が充分に広い場合、以下の様に表示されます。 │aaaaaaaaaaaaaaaaaaaa　　　　　　　bbbbbbbbbbbbbbbbbbbb│ （２）ウインド幅を狭くしていくと、以下の様に表示されます。 │aaaaaaaaaaaaaaaaaaaa　　　　　　　　　　　　　　　bbbbbbbbbbbbbbbbbbbb│ （３）さらにウインド幅を狭くしていくと、以下の様に表示されます。 │aaaaaaaaaaaaaa　　　　　　　bbbbbbbbbbbbbb│ <-スクロールバー-> このhtmlを改造して以下の様な動作を実現したいです。（N１）ウインド幅が充分に広い場合、以下の様に表示されます。 │aaaaaaaaaaaaaaaaaaaa　　　　　　　bbbbbbbbbbbbbbbbbbbb│ （N２）ウインド幅を狭くしていくと、以下の様に表示されます。 │aaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbb│　　　　　　　　　　　　　　　（N３）さらにウインド幅を狭くしていくと、以下の様に表示されます。 │bbbbbbbbbbbbbb｜ <-スクロールバー-> 以下の様に修正してみました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style>  </style> <script> window.onload = function(){ i = function(id){ return document.getElementById(id) }; i('aaa').style.width = i('aaa').innerHTML.length ; } </script> </head> <body> <div id="aaa">aaaaaaaaaaaaaaaaaaaa</div> <div id="bbb">bbbbbbbbbbbbbbbbbbbb</div> </body> </html> （N１）から（N２）までの動作はFF及びOperaでは実現できましたが、IEでは変わらずでした。（N１）、（N２）、（N３）のように動作するにはどうしたらよいでしょうか？
- 締切済み
- HTML
文字の囲みボックスが中央に配置されません。
文字の囲みボックスが中央に配置されません。text-align: center; をCSSのボックスのコードに追加しても、なぜか真ん中に行きません。どうしたらよいでしょうか？回答よろしくお願いいたします。付属画像のように真ん中に配置したいです。コードは下にあります。 ◎ＨＴＭＬのコード <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" /> <title>お問い合わせ</title> <link rel="stylesheet" href="highcoin.css"> <style </style> </head> <body> <div class="box_css"> <p>次の注意事項を読んでください </p> </div> </body> </html> ◎◎ｃｓｓのコード（high coin) /* 電話の際の注意事項ボックスのデザイン， */ .box_css{ width:100px; margin: 5em; border: solid 3px #f83c02; background-color: rgb(255, 255, 255); text-align: center; }
- ベストアンサー
- CSS
CSSのボックスの配置他について
<head> <title>Webサイト</title> <style type="text/css">  </style> </head> <body> <div id="example"> <div id="example1"><h1>ボックス1</h1></div> <div id="boxL">ボックス左</div> <div id="boxR">ボックス右</div> </div> </body> </html> とタグを打ちこみました。下の部分に文字を書きたいのですがどうすればいいですか？あと、<div id="boxL">ボックス左</div>の所は、普通のHTMLタグを使っても問題ないでしょうか？
- ベストアンサー
- その他（プログラミング・開発）
疑似インラインフレームを中央に配置する方法
疑似インラインフレームを中央に配置する方法疑似インラインフレームを画面中央に配置する方法を教えてください。ちなみに、以下のような記述を試してみたのですが…。【css】 body { text-align: center; margin-top: 100px; color: #555555; font-size: 10px; font-family: "ＭＳＰゴシック"; } *{ margin:0px; border:0px; padding:0px; line-height:100%; } .box{ text-align: center; padding-bottom: 50px; } .box_scroll{ text-align: center; width: 300px; height: 200px; padding: 10px 10px; overflow: auto; } 【xhtml】 <div class="box"> <img src="img.jpg" width="100" height="50" alt="img" /> </div> <div class="box"> <div class="box_scroll"> ---文章--- </div> </div> 初めの<div class="box">は中央に配置されるのですが、疑似インラインの部分は左に寄ってしまいます。他にも他の方の質問を参考に試してみたのですが、初心者の為いまいちよくわからず、うまくいきませんでした。どうか回答よろしくお願いいたします。
- ベストアンサー
- HTML
ブラウザ間でのdiv幅の違い
次のようなdivの入れ子を作ったのですが、 IEとFirefoxで大きさが違って表示されてしまいます。 FirefoxでもIEと同じ幅、同じ見ためで表示させるには何をどのように指定してやれば良いでしょうか。よろしくお願いします。 <html> <head> <style type="text/css">  </style> </head> <body> 　<div class="blue"> 　　<div class="green">ここが180px</div> 　</div> </body> </html>
- 締切済み
- HTML
スクロールボックスを中央に配置したいのですが上手く
スクロールボックスを中央に配置したいのですが上手くいきません。自分のコードは下にあります。試してみたこと。下記のURLを参考に https://h110.info/html_box_size/ ｃｓｓのスタイルシートに margin-left: auto; margin-right: auto; を追加してみても変化がありませんでした。何か私のやり方が間違っているのでしょうか？どうしたらよいでしょうか？途方に暮れています。ちなみにスクロールのつまみの色等はきちんと適応されています。画像も付属しておきます。ボックス内の文字一部消しています。 ○HTMLコード <!DOCTYPE html> <html> <head> <meta charset ="utf-8"> <link rel="stylesheet" href="kiyaku.css"> <title></title> </head> <body> <form action ="hpform3.php" method ="post" name="doui_form" onsubmit="return false"> <p></p> <div class="row"> <label class="col-sm-2 control-label" for="name">名前：<?php echo $name; ?></label> </div> <p></p> <label class="title2" for="title2">利用規約</label> </div> <p></p> <div class="main"> <p>(以下「本サービス」といいます。)を提供するにあたり、以下の通り利用規約を定めます。なお、本サービスのユーザーは本規約に同意されたものとみなします。<br> すべての項目にご同意いただけない場合は、本サービスのご利用をお控えください。</p> <h4>第1条 (定義)</h4> </div> </form> <p><a href="form1.php?action=edit">入力画面へ戻る</a></p> </body> </html> ○CSSのコード「kiyaku CSS」 /*スクロールのボックスの位置*/ .main { margin-left: auto; /* 中央寄せにするため */ margin-right: auto; /* 中央寄せにするため */ } /*スクロール内のボックスの指定*/ .main{ width:550px; height:350px; border: 2px solid #63e02d; overflow: auto; margin: 30px; color: #63e02d; } /*スクロールの幅の指定*/ .main::-webkit-scrollbar{ width: 10px; height: 10px; } /*スクロールの背景の指定*/ .main::-webkit-scrollbar-track { border-radius:5px; box-shadow: 004px #63e02d; } /*スクロールのつまみ部分の指定*/ .main::-webkit-scrollbar-thumb { border-radius: 5px; background: #63e02d; }
- ベストアンサー
- CSS
floatによる複数段の段組でIE6で意図通り表示できない
過去の質問に似たような話題ありそうなんですが、どれがこの事象なのか発見できませんでしたので、申し訳ありませんが、新規質問させて頂きます。 HTMLとCSSで以下のように書いています。（再現に必要な部分のみを取り出してあります） ---------------------------------------- <html> <head> <style> .div1 { width:100px; float:left; } .div2 { width:100px; clear:both; float:left; } </style> </head> <body> <div class="div2">あいうえお</div> <div class="div1">かきくけこ</div> <div class="div1">さしすせそ</div> <div class="div2">たちつてと</div> <div class="div1">なにぬねの</div> <div class="div1">はひふへほ</div> </body> </html> ---------------------------------------- 意図は、以下のように、３列×２段の段組で表示することです。あいうえお　かきくけこ　さしすせとたちつてと　なにぬねの　はひふへほ実際 FireFox (2.0.0.6) ではこの通り表示されるのですが、 IE6ではあいうえお　かきくけこ　さしすせと　なにぬねの　はひふへほたちつてとという表示になってしまいます。 IEのバグなのか私の書き方がまずいのかよくわかりませんが、 IEでも意図通り表示させるためにはどのように直したらよいでしょうか？よろしくお願いします。
- ベストアンサー
- HTML
xhtml+css　box内の文字を縦で中央配置したい
css初心者です。自分の知識がないのか、そもそも出来ないことなのかわかっていないですが、よろしくお願いします。テキストをdivタグで囲んでdiv classで高さ60pxのboxにしました。 (↑的確な表現なのか自信がありません；) そのbox内で、テキストを縦位置中央にしたかったのですが、方法が見つからず、応急的に文字の余白の高さ（?）を60にして中央にもってきました。しかしこの方法ではテキストが２行になったときに、２行目がさらに60px下へきて、boxが変形してしまいます。２行でも縦位置で中央に配置できるような方法はありますか？
- ベストアンサー
- HTML
枠の幅が次のようにすると
画面いっぱいに広がってしまいますどうしたら文字列サイズにあわせて枠幅が決まるようにできるでしょうか? <html> <head> <style type="text/css">  </style> </head> <body> <div class="title"> 芹沢鴨 </div> </body> </html>
- ベストアンサー
- HTML