![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
Javascriptで開いた子ウィンドウ内のページについて
レイアウトで困っております。
以下のようなブロック要素の配置について
<div>
<div style="float; left">
コンテンツA
</div>
<div style="float; left">
<div>
コンテンツB
</div>
<div>
コンテンツC
</div>
</div>
<div style="clear: both">
</div>
以上のような配置になっており、
コンテンツ3の中身をJavascriptで書き換えています。
その際、コンテンツCの横幅が変動し右に大きく広がる場合があります。
それにより、ウィンドウサイズによってはコンテンツBCがコンテンツAに回りこんでしまいます。
何故こうなるかは理解出来るのですが、対策が思い浮かびません。
●思いついたが避けたい対応策
・親のdivタグに想定出来る最大値のwidthを設定する
・tableタグによるレイアウト
良い対応策はございませんでしょうか?
よろしくお願いします。
A 回答 (4件)
- 最新から表示
- 回答順に表示
No.4
- 回答日時:
大きなものを小さな箱に入ることはできませんが、
どんな風に対策したいのですか?
横に並べることが出来なければ縦に並べるのも、対策としては十分ではないでしょうか。
No.3
- 回答日時:
スタイルシートの文法では、float:left;ですが、それはタイプミスだとして・・
そもそも、回り込ませたくないブロックをfloatという回り込みをさせるプロパティを使っている意味がわかりません。
また、「コンテンツ3の中身をJavascriptで書き換えています。」がどの部分を指すのかわかりません。
また、3つのブロックが内容的にどのようなものかを教えてください。HTMLは、デザインためではなく(意味的な)文書構造をマークアップするものですから。
No.2
- 回答日時:
揚げ足取りだったらごめんなさい・・・
下記2点、気になりました。
・ <div> と </div> の数が合っていない
・ "float; left" ではなく "float: left;"
No.1
- 回答日時:
かなり適当にこんなの作ってみましたが、うちでは再現しませんでした。
そこ以外のスタイルが問題なのでは?
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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS HTML、cssのatomつぅーやつで 課題Ex1ってやつを表示させたいのですが、 私は課題Ex1が 2 2022/12/15 16:56
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
文字を固定したいのですが…
-
背景色が表示されない><
-
プログラミングでのビンゴマシ...
-
メニューやヘッダー背景だけを...
-
チェックボックスの背景色って...
-
2行目のブラウザ表示以上を省略
-
CSS:floatを使っての段組で困...
-
フッターの下に隙間ができてしまう
-
css固定したフッターが本文と重...
-
指定した項目を二重線で消す
-
webデザイン, コーディング
-
【CSS】floatで左右に並べた...
-
html/cssで要素が出てこなくて...
-
こんな表示はできそうですか?...
-
大分類・中分類・小分類
-
スタイルシート(CSS)で、高さ...
-
文字をクリックしたら別の文字...
-
divのheight指定で画面一杯に表...
-
ラジオボタンで段階評価
-
SafariでもBGMを流す方法という...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
フッター上部に謎の隙間
-
【CSS】floatで左右に並べた...
-
CSS <div>の入れ子が反映さ...
-
Ctrl+F(検索)の窓を出したいの...
-
css固定したフッターが本文と重...
-
textareaで入力した文字を改行...
-
オンマウス時に別画像を上に重...
-
文字を固定したいのですが…
-
スクロール可能なチェックボックス
-
divのheight指定で画面一杯に表...
-
Flickity で画像にリンクを貼る...
-
スタイルシートで画面を上下に...
-
1行で左寄せと右寄せと中央揃え...
-
CSS のみのタブ切り替えについて
-
CSS 可変マージン
-
HTMLですCSSです この画像のよ...
-
チェックボックスの背景色って...
-
HTMLですCSSです 画像のように...
-
画像の特定の座標にカーソルが...
-
TABLEの高さを固定したいのですが…
おすすめ情報