大幅に端折ってしまい申し訳ありませんが、
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を探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
含む含まないという概念自体の...
-
【ヒトの神秘】美男美女から何...
-
質問1.
-
HTMLページ上でiframeを最前面...
-
smallにtext-allignが効かない
-
CSSで改行後の行間調整
-
「諸要素」とはどういう意味で...
-
textareaの幅を画面と合わせたい
-
H1タグを画像にしたい
-
imgタグをそのまま使うことは正...
-
タグは大文字と小文字どちらが...
-
<a href=""
-
緊急です。スクリーンセーバー...
-
改行ほどは行かないけど、若干...
-
tdに対してmin-heightの定義、...
-
cssでメインコンテンツをセンタ...
-
<div align="center">を使わず...
-
ASP.NET コンボボックスのレイ...
-
超音波で洗脳。
-
素直な女性に質問です。要素ラ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【ヒトの神秘】美男美女から何...
-
含む含まないという概念自体の...
-
smallにtext-allignが効かない
-
質問1.
-
「諸要素」とはどういう意味で...
-
input type="hidden"で取得した...
-
角丸画像の背景色を透明にした...
-
改行ほどは行かないけど、若干...
-
CSS:overflow要素の印刷について
-
タグは大文字と小文字どちらが...
-
NからZへの全単射を具体的に構...
-
HTMLでTextareaを横に2つ並べ...
-
H1タグを画像にしたい
-
figcaption要素の中にul要素
-
imgタグをそのまま使うことは正...
-
textareaの幅を画面と合わせたい
-
ある要素の中身を全部グレーア...
-
テキストボックスの中にリンク...
-
スタイルシートで文字色を指定...
-
HTMLページ上でiframeを最前面...
おすすめ情報