ベストアンサー

DIVの崩れを防ぐには

2011/10/13 15:31

図のように<div>で段組を作った場合、このままだとウィンドウの幅を狭めた時に、 CのブロックがBの下に回りこんでしまうと思うのですが、これを防ぎたい場合はやはりA・B・CもしくはB・Cをさらにブロックで囲うしか方法はないでしょうか？

kami222
お礼率60% (84/140)

HTML
回答数9
ありがとう数6

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

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

ベストアンサー

・真綾・（@Ma-yan_bh1011）
ベストアンサー率30% (79/257)

2011/10/13 15:53 回答No.1

「floatで」組んだ場合ですよね？<div>は何もしませんので。結論から言うとそのとおりです。カラム落ちがかっこ悪いというだけでなく、ウィンドウサイズを変えることでレイアウトが変わってしまうのはユーザビリティの観点から見てもよくないですので、ぜひ囲ってください。Aも一緒に入れるかどうかはAの意味にもよりますのでご自身の判断でお願いします。

質問者

お礼 2011/10/16 19:18

やっぱりそれが一番ですか～ありがとうございました！

その他の回答 (8)

DrFell
ベストアンサー率55% (305/551)

2011/10/14 19:29 回答No.9

#7様足し算が出来なくって、お恥ずかしい限りです。ストンと落ちました。ありがとうございました。 #8様仕様書に合わない！何故だ？と思ったのが誤解でした。お調べいただきありがとうございました。 kami222 様妙な割り込み失礼しました。

質問者

お礼 2011/10/16 19:22

解決したようで、なによりです。参考になりました！みなさま回答ありがとうございました！

k0021
ベストアンサー率26% (32/120)

2011/10/14 14:53 回答No.8

No5ですがテンプレートの記述を参考に作成しましたがうまくいきませんので色々調査して作成しましたので通論なのチェックしていません。なんせ老化予防にホームページを勉強していますので、真に申し訳有りませんが回答出来ません。参考の対象部分は、 http://ryuso.info/me/se1/tp_p1.htm#a_b7 ですが、下の「左側表示・左側写真・右側写真・注意書き表示(プラウザ表示状態)」の方が良いと思いますが。ウィンドウの幅を100ぐらいに狭めても対応していますが。(参考の対象部分も同じですが) 35%＋64%＝99%ですが、どこで発生したか忘れました100%でしたらおかしく表示してので99%にしていますが、実際現時点では、100%でもかまいません。 <div style="width:90%;float:left;margin-left:1.25em;">だとおかしくなる？(IE8以降とmac系ブラザ)ではないですよね。

参考URL：: http://ryuso.info/me/se1/tp_p1.htm#a_b7

naokita
ベストアンサー率57% (1008/1745)

2011/10/14 12:35 回答No.7

NO.2ですが、ちょっと横道に逸れますが　失礼 DrFellさん　誤解を誤解してるよ。 101％って何の話？　83+4+4＝91％

DrFell
ベストアンサー率55% (305/551)

2011/10/14 07:36 回答No.6

#4です。#5さん、ご指摘ありがとうございます。当方でも、おっしゃる操作を確認いたしました。101％なのに落っこちていないです。腑に落ちないので教えていただきたいのですが、今回私が思い込んでいた親要素に対して100％以内ならおさまるという認識は、ｃｓｓ仕様書の9.5.1 浮動体を配置する（Positioning the float: the 'float' property）でfloatの配置の箇所、 7.自身の左側に更に別の左浮動ボックスを持っている左浮動ボックスの外右辺は、包含ブロックの右辺より右にきてはならない（簡潔に言うと、左浮動体は、できる限り左に寄せられていなければ、右辺を突き抜けてはならない）。右浮動ボックスも同様の規則に従う。に反して配置されているように思います。すべてのブラウザが誤解釈をしているとも思えず、私の理解に誤解が生じているのでしょうか。ご提示されている例では、フロートされている右辺が包含ブロックの右辺より右に来てると思われるのですが、どのように理解すればいいのか、教えていただけないでしょうか？便乗質問で申し訳ありませんが、どうぞよろしくお願いします。

k0021
ベストアンサー率26% (32/120)

2011/10/14 06:01 回答No.5

私の場合、A・B・CもしくはB・Cをさらにブロックで囲む方法を推薦します。行の開始位置か判るし　まわしこみの解除をしないとブラザーより　おかしくなりますので。なお「著作権について」の行は、まわしこみの解除は、必ず指定しないとIEでは、良いですがMac系では、おかしくなります。％指定でもある程度ウィンドウの幅を狭めた場合発生します。なお、No.4さんの回答の「paddin,border,marginが0と仮定します。それらがある場合は、50％から引き算してください。」は誤りですよ。親要素に対してですよ。添付写真の「注意書き等」の下の行「写真説明一・写真説明二・写　　真」は、「注意書き等」が親要素ですよ。 <div style="width:44%;float:left;"> <div style="width:4%;float:left;">写真説明一 <div style="width:4%;float:left;">写真説明二 <div style="width:83%;float:left;;">写真で作成実際作成しています。表示上100％にしていません。

質問者

お礼 2011/10/16 19:21

やっぱり囲むのが一番安全ですよね。ありがとうございました！

DrFell
ベストアンサー率55% (305/551)

2011/10/13 20:26 回答No.4

Ｂ+Ｃ<100% を保てば下に回りこまないです。例えば、 div{display:inline-block;width:50%;} をB/Cに適用では、どうでしょうか？もしくは、 div{float:left;width:50%;} ただし、paddin,border,marginが0と仮定します。それらがある場合は、50％から引き算してください。

質問者

お礼 2011/10/16 19:20

できれば％指定は使いたくなくて・・・すみません；ありがとうございました。

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/10/13 19:06 回答No.3

「ウィンドウの巾を狭めたとき」に、「floatが解除されないように」という矛盾した要望をもたれても、無理です。　　そもそも、floatは、画像などの周囲に文章を【回り込ませるため】のプロパティですから、『表示しきれないときは下側に回りこませる』のですから、floatでブロックを並べること自体、すでに「ウィンドウ巾に合わせて」を否定しているのです。　--よく見かける方法ですが、どこかのオーサリングツールか、誰かが流行らせたのでしょうね。　　floatさえ使わなければ、いとも簡単に実装できます。しかも本文中ではfloatを使ったり、解除したりが自由に出来ます。詳しくは下記サンプルをご覧ください。 [HTML4.01strict+CSS2.1] ★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">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>サンプル</h1> ＿＿<div class="abstract"> ＿＿＿<h2>要約</h2> ＿＿</div> ＿</div> ＿<div class="article"> ＿＿<div class="section"> ＿＿＿<h2><a name="QUESTION">質問</a></h2> ＿＿＿<p> ＿＿＿＿図のように<div>で段組を作った場合、このままだとウィンドウの幅を狭めた時に、CのブロックがBの下に回りこんでしまうと思うのですが、これを防ぎたい場合はやはりA・B・CもしくはB・Cをさらにブロックで囲うしか方法はないでしょうか？＿＿＿</p> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h2><a name="ANSWER">回答</a></h2> ＿＿＿<p> ＿＿＿＿<img src="./images/sample.gif" width="100" height="60" alt="画像"> ＿＿＿</p> ＿＿＿<p> ＿＿＿＿floatさえ使わなければ、実に簡単に実装できます。floatをブロックの配置に使いませんから、本文中でfloatを使ったり、解除したりが自由に出来ます。floatはそのためにとっておきましょう。＿＿＿</p> ＿＿＿<p> ＿＿＿＿本来はabsoluteを使うべきです。特にリキッドスタイルの場合は、floatではなくabsoluteでなければなりません。＿＿＿</p> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h2><a name="SAMPLE">方法</a></h2> ＿＿＿<p> ＿＿＿＿IE6以前の古いブラウザに対応させるなら、必ず長くなるほう(多くは本文section)を基準にして、短いほうをabsoluteさせる。＿＿＿</p> ＿＿＿<p> ＿＿＿＿IE7以降の新しいブラウザは、min-widthやmax-widthプロパティが使えるのでそれを活用して、ある程度より小さなウィンドウには横幅を固定してしまうとよいかもしれません。＿＿＿</p> ＿＿</div> ＿＿<div class="contentTable"> ＿＿＿<ol> ＿＿＿＿<li><a href="#QUESTION">質問</a></li> ＿＿＿＿<li><a href="#ANSWER">回答</a></li> ＿＿＿＿<li><a href="#SAMPLE">見本</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿</div> </body> </html>

質問者