CSSでfloatしたものって、親要素のheightに反映されません?ただ親要素に背景があって、反映されないと凄く困る感じで・・・。
それってどうやって回避すればいいでしょうか?
取りあえず
<div style="width:750px;background:url(mainback.gif)">
<div style="float:left;width:300px;">左側</div>
<div style="float:right;width:450px;">右側</div>
<br style="clear:both;">
</div>
のように、<br style="clear:both;">みたいにして取逃げたんですが、そもそも無意味なbrを入れるのもどうかと思うし。文法的にもbrにclearって微妙な気もするし、
なにか良い逃げ方ってないでしょうか??
ご存知の方、宜しくお願いいたします。
No.2ベストアンサー
- 回答日時:
まず、外部CSSを作ってリンクしてください。
この現象はCSS2の仕様なんです。
mainback.gifを背景にしたdivにclass名を付け、(仮にAとします)
外部スタイルシートに
.A:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.A {display: inline-table;}
/* Hides from IE-mac ?*/
* html .??? {height: 1%;}
.A {display: block;}
/* End hide from IE-mac */
とコピペすると解決します。
HTMLコードをキレイにする意味でも外部スタイルシートをおすすめします。
参考URL:http://www.positioniseverything.net/easyclearing …
No.1
- 回答日時:
背景のためにやってるのではないのですが、左右に別けたブロックの下にもう一つDIVでブロック(フッタ部分って感じ)を作る時clear:bothを<br>や<tr>に定義しちゃう事はありますね。
heightの指定はしたくないので、こういう事やってしまいます。僕も文法にはこだわる方なんですけど、色々やってると理不尽な事って結構ありマス(^^;。特にDIVを使ったレイアウトをしていると、謎な挙動に結構出くわすんですよね。今回の質問に関しては<br style="clear:both">で回避できるなら、それでいいんじゃないでしょうか。
なんか文法にこだわってると、きりないかもですね(汗;)
ちなみにこの質問を載せた後に、clear:bothについて調べてみたんですが、本当はブロックレベルにしか使えないらしいです。
だから、やっぱりこれも本当はダメらしい・・まぁうまく表示されるから今のところはOKだけどね(笑)
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
position: relativeでIE6に余分...
-
文章を2段組にしたい場合にC...
-
ウィンドウサイズを無視して、D...
-
動く(流れる)文字列はどうや...
-
画像のランダム表示、及び画像...
-
オンマウスで画像が切り替わっ...
-
-UWSC:IEで自動クリック-
-
背景色を透明化
-
バッチファイルでカウントアッ...
-
外部参照で画像出したいのだが...
-
USEMAPでの指定区域にマウスオ...
-
「jQuery」アコーディオンメニ...
-
Javascript <li>
-
MAX関数を使ってからLEFT JOIN...
-
Javascriptで指定した日付と時...
-
テキストエリア内の一部の文字...
-
オンマウスで画像ロールオーバ...
-
ページ遷移後のcssプロパティ保持
-
表と裏がある1枚の画像を回転す...
-
5秒後にフェードイン
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
スライダーの枠に動画を収める...
-
フッター上部に謎の隙間
-
【CSS】floatで左右に並べた...
-
オンマウス時に別画像を上に重...
-
CSS <div>の入れ子が反映さ...
-
文字を固定したいのですが…
-
Ctrl+F(検索)の窓を出したいの...
-
テーブルの1つのセル内で、上揃...
-
CSS のみのタブ切り替えについて
-
フッターの下に隙間ができてしまう
-
スクロール可能なチェックボックス
-
Flickity で画像にリンクを貼る...
-
スマートフォンで適切に見られ...
-
floatさせたdivタグを折り返さ...
-
オープニングにアニメーション...
-
html/cssで要素が出てこなくて...
-
チェックボックスの背景色って...
-
サイトにコンテンツを並べる際...
-
CSS 可変マージン
-
HTML CSS 文字化け
おすすめ情報