よろしくおねがいします。
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ランキング
-
ホームページビルダーの画像サ...
-
ボタンをセル内一杯に表示させ...
-
リンクをつけた画像をクリック...
-
画像とテーブルの隙間をなくす。
-
画像を、横並びにするには!?
-
リンクを選択したときの青い枠...
-
サイトで、回り込みで文字を記...
-
jqureryスライドショーが上手く...
-
htmlについて
-
画像を全体の200%の倍率で表示...
-
プルダウンの選択リストの中に...
-
HTMLは、シングルクォートかダ...
-
機種依存文字、m2(平方メート...
-
html超基本
-
ワードプレス max-width100%が...
-
画像が真ん中に来て画像と商品...
-
HTMLの文章中の画像のベースラ...
-
セルの中の画像の隙間
-
ブラウザ別の余白誤差って解消...
-
cssで一部の文字や画像を中央に...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リンクを知らせる手のマークが...
-
ボタンをセル内一杯に表示させ...
-
htmlで画像を2個ずつ並べていき...
-
機種依存文字、m2(平方メート...
-
HTMLタグのDL DT DDを使ってli...
-
画像の場合のみ、下線を消す方...
-
画像を縦に並べたら隙間ができ...
-
画像のサイズが変わらない
-
ポップアップウィンドウのサイ...
-
inputタグでサーバにデータを送...
-
HTMLでボタンを横に2つ並べる方法
-
XML画像データををHTMLで簡単に...
-
レスポンシブ対応のHTML・CSS(...
-
【HTML/CSS】ボタンの枠が伸び...
-
リンクをつけた画像をクリック...
-
UDP通信を使うチャットプログラ...
-
HTMLのIMAGEに。。
-
imgタグは何で囲むのが良いか
-
ホームページで画像を横に並べ...
-
画像をクリックして元に戻すには
おすすめ情報