- 締切済み
floatさせたdivタグを折り返させたくない
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タグによるレイアウト 良い対応策はございませんでしょうか？ よろしくお願いします。
- glass_prison
- お礼率20% (1/5)
- HTML
- 回答数4
- ありがとう数0
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
大きなものを小さな箱に入ることはできませんが、 どんな風に対策したいのですか？ 横に並べることが出来なければ縦に並べるのも、対策としては十分ではないでしょうか。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
スタイルシートの文法では、float:left;ですが、それはタイプミスだとして・・ そもそも、回り込ませたくないブロックをfloatという回り込みをさせるプロパティを使っている意味がわかりません。 また、「コンテンツ３の中身をJavascriptで書き換えています。」がどの部分を指すのかわかりません。 また、３つのブロックが内容的にどのようなものかを教えてください。HTMLは、デザインためではなく(意味的な)文書構造をマークアップするものですから。
- cafebean
- ベストアンサー率57% (22/38)
揚げ足取りだったらごめんなさい・・・ 下記２点、気になりました。 ・ <div> と </div> の数が合っていない ・ "float; left" ではなく "float: left;"
- f_onion
- ベストアンサー率47% (10/21)
かなり適当にこんなの作ってみましたが、うちでは再現しませんでした。 そこ以外のスタイルが問題なのでは？ 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>
