![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?8acaa2e)
よろしくおねがいします。
http://www.sonzai.net/test/test.html
参考URL↑
中央に<iframe>を置き、それを囲むようにフレームを設置したいのですが、
下辺だけ微妙に離れてしまいます。
【HTML】
<div id="subnavibar">
<p><img src="images/top/event.png" width="220" height="50" /></p>
<img src="images/top/event.png" width="10" height="300" /><iframe src="a.html" width="200px" height="300px" scrolling="yes" frameborder="0" name="side"></iframe><img src="images/top/event.png" width="10" height="300" />
<p><img src="images/top/event.png" width="220" height="20" /></p>
</div>
【css】
#subnavibar {
width: 240px;
float: left;
background-color: #ffffff;
height: 100%;
}
原因としては、何があるでしょうか?
No.2ベストアンサー
- 回答日時:
> 原因としては、何があるでしょうか?
「img要素の基準線としてbaselineが指定されているから」だそうです。(調べて知りました)
対策は2つあります。
1. 空白文字を取り除く
<div id="subnavibar">
<p><img src="01.gif" width="220" height="50" /></p>
<img src="02.gif" width="10" height="300" /><iframe src="a.html" width="200px" height="300px" scrolling="yes" frameborder="0" name="side"></iframe><img src="02.gif" width="10" height="300" /><p><img src="03.gif" width="220" height="20" /><BR><BR>赤のバーがピッタリとくっつきません。</p>
</div>
2. vertical-align:bottom; を指定する
<style type="text/css">
img,iframe { vertical-align:bottom; }
</style>
Export-Japan Blog » Blog Archive » IEで、画像の下に隙間ができたり、逆に隙間がバラバラだったり
http://www.export-japan.co.jp/blog/2007/06/21/ie …
No.3
- 回答日時:
なぜか改行場所を変えただけで、IE8では引っ付きました。
理由は分かりません。
<DIV id=subnavibar>
<P><IMG src="test.files/01.gif" width=220 height=50></P>
<IMG src="test.files/02.gif" width=10 height=300><IFRAME height=300
src="test.files/a.htm" frameBorder=0 width=200 name=side
scrolling=yes></IFRAME><IMG src="test.files/02.gif" width=10 height=300><P><IMG src="test.files/03.gif" width=220 height=20>
<BR>
No.1
- 回答日時:
Firefoxならくっついてますよ。
<div id="subnavibar">
<img src="01.gif" width="220" height="50"><br>
<div style="clear: both;">
<img src="02.gif" width="10" height="300" style="float: left;">
<iframe src="a.html" width="200px" height="300px" scrolling="yes" frameborder="0" name="side" style="float: left;">a.html</iframe>
<img src="02.gif" width="10" height="300" style="float: left;">
</div>
<img src="03.gif" width="220" height="20">
</div>
↑これに変えてみてください
「 /」はXHTMLで作ってないからいらないですよ。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP 共通の処理をまとめる方法がわからないのでアドバイスお願いします。 1 2022/12/19 20:20
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript 画像の表示位置 3 2022/12/23 08:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リンクを知らせる手のマークが...
-
ボタンをセル内一杯に表示させ...
-
HTMLタグのDL DT DDを使ってli...
-
favicon.ico はもういらない?
-
table で画像をピッタリとくっ...
-
HTMLでボタンを横に2つ並べる方法
-
CSSでボックスの位置を変えたと...
-
同一URLの連続アクセス方法
-
htmlで画像を2個ずつ並べていき...
-
画像を隙間なく配置する方法
-
Safariの場合HTMLの内容を変更
-
CSSで画像配置の垂直方向指定
-
画像のサイズが変わらない
-
inputタグでサーバにデータを送...
-
CGI(更新記録)で写真の上にロゴ
-
アップロードするとレイアウト...
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ボタンをセル内一杯に表示させ...
-
リンクを知らせる手のマークが...
-
htmlで画像を2個ずつ並べていき...
-
ポップアップウィンドウのサイ...
-
画像のサイズが変わらない
-
UDP通信を使うチャットプログラ...
-
XML画像データををHTMLで簡単に...
-
【HTML/CSS】ボタンの枠が伸び...
-
リンクを選択したときの青い枠...
-
favicon.ico はもういらない?
-
table で画像をピッタリとくっ...
-
CSSの左横に隙間ができてしまい...
-
HTMLのIMAGEに。。
-
HTMLは、シングルクォートかダ...
-
ホームページで画像を横に並べ...
-
画像とテーブルの隙間をなくす。
-
リンクをつけた画像をクリック...
-
c言語を用いて画像の透明度をあ...
-
ホームページタグ打ち。サイズ...
-
サムネイルをマウスオーバーす...
おすすめ情報