
大幅に端折ってしまい申し訳ありませんが、
2カラム構造の左カラムに以下のようなコードを書いたところ
画像(sample.jpg)とボックスbとが重なって表示されてしまいます。
そこでフロートを解除しようとボックスaの後に<br style="clear:both">を記載すると、
右カラムの下にボックスbが表示されてしまいました。
このような画像にfloatを使用した際の高さからくる重なりを防ぐ方法などありませんでしょうか?
初心者な質問で申し訳ありませんが、宜しくお願いします。
<DIV id="a">
<img src="sample.jpg" style="float:right;">
</DIV>
<DIV id="b">
hoge
</DIV>
No.2ベストアンサー
- 回答日時:
そもそもfloatとは、ボックス要素(p,div,li・・)内の要素をブロックにしてfloat、その周囲に残りの要素を回りこませるので、ブロック同士で行うのは本来の使い方と異なります。
floatに伴う北以外の動作の大部分はそれに由来するものです。たとえば、画像を右に配置して他の要素を回り込ませるのなら単純に、
<div>
<p><img stryle="float:left"></p>
<p>他のコンテント・・・・・・</p>
<hr style="visibility:hidden;height:0px;">
次の内容・・・・
</div>
でよいはず。
内容の左端を空けたければ、<p style="margin:left:100px;">他のコンテンツ・・・</p>
ご回答ありがとうございます。
なるほど・・ ブロック同士で行うのは本来の使い方とは異なるのですね。
以後、気に留めていきたいと思います。
早速教えて頂いた方法を参考に組み直したところ、無事に思っていたように表示されました。
ありがとうございます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
含む含まないという概念自体の...
-
角丸画像の背景色を透明にした...
-
CSSで改行後の行間調整
-
input type="hidden"で取得した...
-
エクセル vbaに詳しい方 お願い...
-
テキストボックスの中にリンク...
-
ホームページビルダー16の属...
-
inputタグはformタグで必ず囲む...
-
2行にしたい要素、改行か分割...
-
html タグの閉じスラッシュ前の...
-
ホームページ作成でリンクを作...
-
<!-- #BeginLibraryItemとは
-
idの中のid指定
-
スタイルシートで、id属性の中...
-
<ul><li></li></ul>にするメリ...
-
li タグ全体をリンクに。
-
1時間30分を簡単に表したいで...
-
<form <input type="text"の枠...
-
liにスタイルシートが上手くい...
-
safariでの横並びリスト(List...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
含む含まないという概念自体の...
-
【ヒトの神秘】美男美女から何...
-
角丸画像の背景色を透明にした...
-
NからZへの全単射を具体的に構...
-
CSSで改行後の行間調整
-
改行ほどは行かないけど、若干...
-
HTML の繰返し法???
-
aの中にspan
-
マージソートの計算量について-...
-
input type="hidden"で取得した...
-
親要素・子要素
-
質問1.
-
tdに対してmin-heightの定義、...
-
テキストボックスの中にリンク...
-
スタイルシートで文字色を指定...
-
その要素がjQueryでremove()済...
-
見た目と声さえ良ければ、他の...
-
CSSのa:hoverが急に一部だけ効...
-
「にはとって代わることのでき...
-
fontawesomeのアイコンを少し大...
おすすめ情報