【cssのはてな】大きいdivの中に小さいdivを2つ左右振り分けで、小divの左側を60px空けたいです。
IEだと上手くいくのですが、FFだと左のdivと右divの間に隙間ができてしまう…（左図参照）
「text-align」をいろいろ入れてみたのですが、よくわかりません。
====css==========
div#content{ width: 680px; height: 100px; margin: 0px; padding: 0px; border: 1px #ff0000 solid;}
div#left{ float: left; width: 308px; height: 100px; margin: 0px 0px 0px 60px; padding: 0px; border: 1px #ff0000 solid;}
img#right{ float: right; width: 242px; height: 100px; margin: 0px; padding: 0px; border: 1px #ff0000 solid;}
====html==========
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="base.css" />
<title>たとえば</title>
</head>
<body>
<div id="content">
<div id="left">
<p>ここに文字。</p>
</div>
<img src="img.jpg" id="right" alt="ここに画像"/>
</div>
</body>
</html>
ベストアンサー
-
talepanda
満足60pt
動作としてはfirefoxの方が正しいような気がしますが・・・
css
div#content{ width:620px; height: 100px; margin: 0px; padding: 0px; border: 1px #ff0000 solid;} div#left{ float:right;width: 308px; height: 100px; margin: 0px; padding: 0px; border: 1px #ff0000 solid;} img#right{ float: right; width: 242px; height: 100px; margin: 0px; padding: 0px; border: 1px #ff0000 solid;}ジャスト60pxにはなりませんけど。
ホントは、contentのwidthから内部のdiv、imgのwidthを引いた分だけ左側に余白ができるはずなんですが、微妙に隙間があったりしますね。
あるいは
div#content{ width:610px; height: 100px; margin: 0px; padding: 0px; border: 1px #ff0000 solid;} div#left{ position:relative; float: left; left: 60px; width: 308px; height: 100px; margin: 0px; padding: 0px; border: 1px #ff0000 solid;} img#right{ position:relative; float:left; left: 60px; width: 242px; height: 100px; margin: 0px; padding: 0px; border: 1px #ff0000 solid;}とか？
-
cyuna
ありがとうございます！
上の方法でやってみました。
そうか！divが左にあるからといって、かならずしも「float:left;」ではないんですね。
でも、html側で
との順番を入れ替えなければいけないのはナゼだろう・・・？
その他の回答
この質問へのコメント
質問の情報
- 登録日時
- 2006-09-15 11:22:45
- 終了日時
- 2006-09-15 12:36:31
- 回答条件
- 1人2回まで
この質問のカテゴリ
この質問に含まれるキーワード
人気の質問
-
この英文どうなってますか？ The boy seemed to be waiting for his mother to come.（その少年は母親が来…
匿名質問者
1
1
-
不定詞の形容詞的用法らしいんですけど、副詞的用法と書いたら✖️ですか？ I want to buy a book to read …匿名質問者11
-
日向陽葵という○V女優が好きなのですが似ている○V女優はいますか匿名質問者
-
共通テストで使われるプログラミング言語は共通テスト特有の言語と聞いたのですが、受験勉強で身につけたプ…匿名質問者1
-
内定してほしいポケモンはいますか？匿名質問者
メニュー
PC版
-
cyuna
誤 小さいdivを2つ左右振り分けで
正 小さいdivを左に1つ、小さいimgを右に1つ
＞との順番を入れ替えなければいけないのはナゼだろう・・・？
どういうことでしょう？
お返事の最後2行訂正
でも、html側で
「div id="left"」と「img～ id="right」
との順番を入れ替えなければいけないのはナゼだろう・・・？
上のままでは、画像と文字の場所が入れ替わってしまったのですが、
<div id="content">
<img src="img.jpg" id="right" alt="ここに画像"/>
<div id="left">
<p>ここに文字。</p>
</div>
</div>
としたら上手くいきました。