floatさせたdivタグを折り返させたくない

締切済

質問者：glass_prison
質問日時：2012/04/18 19:05
回答数：4件

Javascriptで開いた子ウィンドウ内のページについて
レイアウトで困っております。

以下のようなブロック要素の配置について

<div>
<div style="float; left">
コンテンツA
</div>
<div style="float; left">
<div>
コンテンツB
</div>
<div>
コンテンツC
</div>
</div>
<div style="clear: both">
</div>

以上のような配置になっており、
コンテンツ３の中身をJavascriptで書き換えています。
その際、コンテンツCの横幅が変動し右に大きく広がる場合があります。

それにより、ウィンドウサイズによってはコンテンツBCがコンテンツAに回りこんでしまいます。
何故こうなるかは理解出来るのですが、対策が思い浮かびません。
●思いついたが避けたい対応策
・親のdivタグに想定出来る最大値のwidthを設定する
・tableタグによるレイアウト

良い対応策はございませんでしょうか？
よろしくお願いします。

通報する

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

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： taloo
回答日時：2012/04/20 02:56

大きなものを小さな箱に入ることはできませんが、

どんな風に対策したいのですか？

横に並べることが出来なければ縦に並べるのも、対策としては十分ではないでしょうか。

- 0
- 件

通報する

No.3

回答者： ORUKA1951
回答日時：2012/04/19 18:58

スタイルシートの文法では、float:left;ですが、それはタイプミスだとして・・

そもそも、回り込ませたくないブロックをfloatという回り込みをさせるプロパティを使っている意味がわかりません。

　また、「コンテンツ３の中身をJavascriptで書き換えています。」がどの部分を指すのかわかりません。

　また、３つのブロックが内容的にどのようなものかを教えてください。HTMLは、デザインためではなく(意味的な)文書構造をマークアップするものですから。

- 0
- 件

通報する

No.2

回答者： cafebean
回答日時：2012/04/19 11:41

揚げ足取りだったらごめんなさい・・・

下記２点、気になりました。

・ <div> と </div> の数が合っていない
・ "float; left" ではなく "float: left;"

- 0
- 件

通報する

No.1

回答者： f_onion
回答日時：2012/04/18 21:54

かなり適当にこんなの作ってみましたが、うちでは再現しませんでした。

そこ以外のスタイルが問題なのでは？
IE9, Chromium

<html>
<body style="width:80px;">

<div id="inputpanel">
<textarea type="text" rows=4 id="vtxt" value="abc"></textarea>
<input type="button" value="Cの入れ替え" onclick='document.getElementById("c").innerText=document.getElementById("vtxt").value' >
<br>

<input type="button" onclick='window.showModalDialog("qa.html")' value="open this as modal"><br>
<input type="button" onclick='document.getElementById("inputpanel").style.display="none";' value="hide"><br>
</div>
<input type="button" onclick='document.getElementById("inputpanel").style.display="block";' value="show"><br>
<br>

<div>

<div style="float; left">
コンテンツA
</div>
<div style="float; left">
<div>
コンテンツB
</div>
<div id="c">
コンテンツC
</div>
</div>
<div style="clear: both">
</div>

</body>
</html>