- 締切済み
floatで並べた２つのdivの高さを揃えるには？
コーディング初心者です。 以下の内容のcssがかけなくて困っています。 内容は <p id="a">A</p> <div id="b">B</div> <p id="c">C</p> 今はこの3つをfloatで横並びにします。 #a {float: left;} #b {float: right;} #c {float: right;} ここで、BとCに入る内容が変わる場合でも2つの高さが揃うようにしたいのですが、 MTを使用し、Bを表示させないこともあるので、 BとCを<div>で囲み幅を指定することができません。 何か方法はありますでしょうか？ 参考のURL等を教えていただけるだけでもたすかります。 よろしくお願いします。
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
すみません。タブインデントを置換するのを忘れて投稿したので、インデントがわかりづらいですね。 このようにidを使わないと、同じような内容のセクションがいくつ連続していても良いですね。 <body> <h1> <p> <div class="section"> ・・・ </div> <div class="section"> ・・・ </div> <div class="section"> ・・・ </div> </body> また、ブロックの配置にfloatを使わない方がよいのは、本文中でfloatさせたい添付画像がある場合、それを本文中でclearできなくなるからです。floatはブロックを配置するためではなく、あくまで文章を画像などの周囲を回り込ませるためのものです。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTMLのマークアップは、文書構造が理解できるように・・・ 今回の場合、地位と写真は、ひとつのsection(章)に含まれるわけですから、同じdiv内にないと、当然「高さをそろえる」という表現と整合が取れません。正しい(文書解析木に従った)HTMLを書かないと、CSSがかけないとはそういう意味です。 また、繰り返しになりますが、デザインのためにIDを記述するのは良くありません。ID、CSSで言うところの一意セレクタは文字通りHTML内の唯一無二の要素を特定するもので、詳細度も100ありますから、サンプルようなグループ化やCSSの最大の利点であるカスケーディングを利用しにくくなります。 セレクタで詳細度を考慮して記述すると、無駄なIDを書かなくても特定の要素にスタイルシートを適用できます。 サンプルは、HTML4.01strictで書いておきました。こんなシンプルなHTMLで良いのですよ。CSSもそのためシンプルになる。「HTMLは文書構造を」「スタイルシートはデザインを」と使い分けましょう。 このHTMLは、 The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input ) Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証してあります。私は常にチェックするようにしています。 ★タブインデントを＿(全角)に置換してありますので、元に戻すこと。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> <meta name="author" content="ORUKA1951"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > <link rel="START" href="../index.html"> <style type="text/css"> <!-- html,body{margin:0;padding:0;} body{line-height:1.4em;} p{margin:0.1em 0;text-indent:1em;} div.section{ width:640px;margin:auto; border:1px gray solid; position:relative; padding:0; } div.section div.position, div.section p.photo{ position:absolute; width:150px; top:0; border:1px black solid; height:100%; margin:0; } div.section div.position{ left:0; } div.section p.photo{ right:0px; } div.section p{ margin:0 160px; } div.section ul.license, div.section ul.hobby{margin-left:180px;} div.section div.position p{margin:0;} /* 表示テスト用色分け */ body{background-color:gray;} div.section{background-color:silver;} div.section div.position{background-color:aqua;} div.section p.photo{background-color:white;} --> </style> </head> <body> <h1>タイトルが入ります</h1> <div class="section"> <p>メーッセージがはいります。</p> <p>長い文章のメーッセージが、だらだらと、延々とはいるとインデントされます</p> <div class="position"> <p>役職</p> <p>名前</p> </div> <ul class="license"> <li>資格2</li> <li>資格2</li> <li>資格3</li> </ul> <p class="photo"><img src="url" alt="プロフィール写真" width="100" height="120"></p> <ul class="hobby"> <li>趣味はスポーツです</li> <li>趣味はスポーツです</li> </ul> </div> </body> </html>
- mikemike7
- ベストアンサー率87% (97/111)
HTMLは得意ではないので、参考になるかわかりませんが＾＾； 以下、質問者さんのHTMLソースを下に修正を加えたものです。 // CSS部 #content { background-color: #cccccc; width: 600px; padding: 10px; margin-bottom: 15px; } #content #messageBox { width: 580px; margin-bottom:15px; } div#messageBoxtop { position:relative; } #content #messageBox #message { width: 300px; /*float: left;*/ top: 0; left: 0; position: absolute; } ul#prof{ list-style-type: none; width: 220px; background-color: #ffffff; position: relative; top: 0; left: 320px; } ul#prof > li#photo { /*float: right;*/ width: 70px; position: absolute; top: 0; left: 0; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; } ul#prof > li#profile { /*float: right;*/ width: 130px; position: relative; top: 0; left: 70px; background-color: #FFFFFF; padding: 10px; } #content #messageBox #profile #name { padding-left: 10px; margin-bottom: 5px; } #content #messageBox #profile ul#license { line-height: 1.3em; font-size: 79%; } #content #messageBox #profile ul#hobby{ } // HTML部 <div id="content"> <h1>タイトルが入ります</h1> <div id="messageBox"> <div id="messageBoxtop"> <div id="message"> メーッセージがはいります<br /> メーッセージがはいります </div> <ul id="prof"> <li id="profile"> <div id="name"> <p>役職</p> <p>名前</p> </div> <ul id="license"> <li>資格2</li> <li>資格2</li> <li>資格3</li> </ul> <li id="photo"><img src="bt029_36.gif" alt="プロフィール写真" /> </ul> </div> <ul id="hobby"> <li>趣味はスポーツです</li> <li>趣味はスポーツです</li> </ul> </div> </div> absoluteとrelativeで作っているので、常に長いほうをベースにします。 提示ソースのものだと、 「メーッセージがはいります」の部分が長くなりすぎるとはみ出ます。 こちらのほうが常に長くなるようでしたら、こちらをベースにすればいいかと思います。 同じように写真と名前の部分も、名前のほうをベースにしています。 写真の縦幅が名前を越えてしまうとはみ出ます。 はみ出るのを防ぐなら overflow などを使うしかないと思います。 まあ、参考になりましたら。
お礼
とても丁寧にご指導いただいて、本当にありがとうございます。 floatを使用せずにpositionを使用するのですね。 大変、参考になりました。 ただ、写真部分がない場合も考慮しなければならないので、 頂いたものから調整してみようと思います。 わかりづらい説明の質問でしたが、お答えいただき、感謝いたします。 ありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
これだと、アンチテーブル派の私でも、十分tableなので、tableでマークアップしたほうが良いと思います。 ただ、どうデザインするかが先立ってしまったためか、意味不明の順番になっていますね。
お礼
再度、ご回答をいただき、ありがとうございました。 tableでつくってみます。 確かに、自分以外の方がみるとわからないのでは、よくないですね。。。 もっときれいに、整理されたコードがかけるようになれるように努力します。。。 本当にありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
MTとは何でしょう。できるだけ多くの人にわかるよう一般的でない省略はしないほうが良いです。 CSSの説明サイトやツールが出力するものでない限り <p id="a">A</p> #a {float: left;} なんてないです。HTMLを正しくマークアップしていると、CSSは簡単なものになるはずです。一意セレクタはいらない。 例： <body> <div class="header"> <h1>見出し</h1> <p>・・・・</p> </div> <div class="section"> <h2>見出し</h2> <p>あいうえお</p> <div class="figure"> <img src="[URL]"> </div> <div class="aside"> <h3>脚注</h3> <p>・・・</p> </div> </div> <div class="section"> <h2>見出し</h2> ・・・・・ </div> </body> の場合として、div.section(本文)内のdiv.figure(挿絵)を左に、div.aside(脚注)を右に配置したいなら、普通に div.figure,div.aside{top:0;width:200px;} div.aside{float:right;}div.figure{float:left;} div.section{clear:both;position:relative;padding:0 200px;} で良いのではないですか？ 肝心なことは、デザインのためではなく文書構造に従って正しくマークアップする。それさえできていれば、どのようにも配置できる。どうしても足りなければ、HTMLを見直す。 あなたが作成されている部分の文書内容--文書内のどんな要素なのか--を教えてください。そこから出発ですよ。
お礼
返答いただきありがとうございました。 わかりづらくて申し訳ありません。 再度、詳細を記述いたしました。 質問の内容は <div id="name">と<p id="photo">だけ背景を同じ色にして、高さを揃えたいです。 ORUKA1951さんの方法で一度試してみます。 ただ、まだわからない時は再度質問させてください。 【html】 <body> <div id="content"> <h1>タイトルが入ります</h1> <div id="messageBox"> <p id="message">メーッセージがはいります<br />メーッセージがはいります</p> <div id="profile"> <div id="name"> <p>役職</p> <p>名前</p> </div> <ul id="license"> <li>資格2</li> <li>資格2</li> <li>資格3</li> </ul> </div> <p id="photo"><img src="url" alt="プロフィール写真" /></p> <ul id="hobby"> <li>趣味はスポーツです</li> <li>趣味はスポーツです</li> </ul> </div> </div> </body> 【css】 #content { background-color: #cccccc; width: 600px; padding: 10px; margin-bottom: 15px; } #content #messageBox { width: 580px; margin-bottom:15px; } #content #messageBox #message { width: 300px; float: left; } #content #messageBox #photo { float: right; width: 70px; background-color: #FFFFFF; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; } #content #messageBox #profile { float: right; width: 130px; background-color: #FFFFFF; padding: 10px; } #content #messageBox #profile #name { padding-left: 10px; margin-bottom: 5px; } #content #messageBox #profile ul#license { line-height: 1.3em; font-size: 79%; } #content #messageBox #profile ul#hobby{ clear: both; }
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
「floatはブロックを配置するためではなく、あくまで文章を画像などの周囲を回り込ませるためのものです。」 なるほど、 floatの使用を勘違いしておりました。 ORUKA1951さまには、質問直後から時間をさいていただき、本当に感謝いたします。