プロが教える店舗＆オフィスのセキュリティ対策術

DIVの崩れを防ぐには

解決済

  • 質問者：kami222
  • 質問日時：
  • 回答数：9件

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

「DIVの崩れを防ぐには」の質問画像
通報する

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

質問の本文を隠す

A 回答 (9件)

No.1ベストアンサー

「floatで」組んだ場合ですよね？<div>は何もしませんので。


結論から言うとそのとおりです。
カラム落ちがかっこ悪いというだけでなく、ウィンドウサイズを変えることでレイアウトが変わってしまうのはユーザビリティの観点から見てもよくないですので、ぜひ囲ってください。Aも一緒に入れるかどうかはAの意味にもよりますのでご自身の判断でお願いします。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2011/10/16 19:18

No.2

  • 回答者： naokita
  • 回答日時：

floatのみの場合は、


外枠で囲んでwidthを設置すると崩れませんが、
positionで固定したり、
その他のプロパティで配置する事も出来ます。
    • good
    • 0
    • 件
通報する
この回答へのお礼

positionで固定・・・そういうのもありですね！
なるほど、参考になりました。ありがとうございます！

通報する
お礼日時：2011/10/16 19:19

No.3

  • 回答者： ORUKA1951
  • 回答日時：

　「ウィンドウの巾を狭めたとき」に、「floatが解除されないように」という矛盾した要望をもたれても、無理です。


　
　そもそも、floatは、画像などの周囲に文章を【回り込ませるため】のプロパティですから、『表示しきれないときは下側に回りこませる』のですから、floatでブロックを並べること自体、すでに「ウィンドウ巾に合わせて」を否定しているのです。
　--よく見かける方法ですが、どこかのオーサリングツールか、誰かが流行らせたのでしょうね。
　
　floatさえ使わなければ、いとも簡単に実装できます。しかも本文中ではfloatを使ったり、解除したりが自由に出来ます。詳しくは下記サンプルをご覧ください。

[HTML4.01strict+CSS2.1]
★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
で検証済み
※タブは、＿に置換してあります。

<!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;background-color:gray;}
div.section p{
＿text-indent:1em;
＿margin:0 1em;
＿line-height:1.6em;
}
div.header,div.article,div.footer{
＿width:70%;margin:0 auto;/* センター配置IE5,非対応 */
/* min-width:400px; */ /*あまり小さくならないようにしたいときは */
＿border:solid 1px rgb(255,200,200);background-color:rgb(255,200,200);
}
div.article{
＿position:relative;
＿background-color:lime;border-color:lime;
}
div.article div.section img{
＿float:left;
＿margin: 5px;
＿border:1px solid gray;
＿background-color:white;
}
div.article div.section{
＿margin-left:42%;margin-bottom:200px;/* 見本のため */
＿clear:left;/* clearがこのブロック内で使える */
}
div.article div.contentTable{
＿position:absolute;
＿top:0;left:0;width:40%;height:100%;
＿background-color:aqua;border-color:aqua;
}
div.footer{background-color:yellow;border-color:yellow;}

-->
＿</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>
＿＿＿＿図のように&lt;div&gt;で段組を作った場合、このままだとウィンドウの幅を狭めた時に、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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2011/10/16 19:19

No.4

  • 回答者： DrFell
  • 回答日時：

Ｂ+Ｃ<100%


を保てば下に回りこまないです。

例えば、
div{display:inline-block;width:50%;}
をB/Cに適用では、どうでしょうか？

もしくは、
div{float:left;width:50%;}

ただし、paddin,border,marginが0と仮定します。それらがある場合は、50％から引き算してください。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2011/10/16 19:20

No.5

  • 回答者： k0021
  • 回答日時：

私の場合、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％にしていません。
「DIVの崩れを防ぐには」の回答画像5
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2011/10/16 19:21

No.6

  • 回答者： DrFell
  • 回答日時：

#4です。

#5さん、ご指摘ありがとうございます。当方でも、おっしゃる操作を確認いたしました。101％なのに落っこちていないです。腑に落ちないので教えていただきたいのですが、

今回私が思い込んでいた親要素に対して100％以内ならおさまるという認識は、ｃｓｓ仕様書の9.5.1 浮動体を配置する（Positioning the float: the 'float' property） でfloatの配置の箇所、

7.自身の左側に更に別の左浮動ボックスを持っている左浮動ボックスの外右辺は、包含ブロックの右辺より右にきてはならない（簡潔に言うと、左浮動体は、できる限り左に寄せられていなければ、右辺を突き抜けてはならない）。右浮動ボックスも同様の規則に従う。

に反して配置されているように思います。すべてのブラウザが誤解釈をしているとも思えず、私の理解に誤解が生じているのでしょうか。ご提示されている例では、フロートされている右辺が包含ブロックの右辺より右に来てると思われるのですが、どのように理解すればいいのか、教えていただけないでしょうか？

便乗質問で申し訳ありませんが、どうぞよろしくお願いします。
    • good
    • 0
    • 件
通報する

No.7

  • 回答者： naokita
  • 回答日時：

NO.2ですが、ちょっと横道に逸れますが　失礼



DrFellさん　誤解を誤解してるよ。

101％って何の話？　83+4+4＝91％
    • good
    • 0
    • 件
通報する

No.8

  • 回答者： k0021
  • 回答日時：

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
    • good
    • 0
    • 件
通報する

No.9

  • 回答者： DrFell
  • 回答日時：

#7様


足し算が出来なくって、お恥ずかしい限りです。ストンと落ちました。ありがとうございました。

#8様
仕様書に合わない！何故だ？と思ったのが誤解でした。お調べいただきありがとうございました。

kami222 様
妙な割り込み失礼しました。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2011/10/16 19:22

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

Q質問する（無料）

関連するカテゴリからQ&Aを探す

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

Q質問する（無料）

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

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

おすすめ情報