ログイン
質問する
Gizport
AUTO S2の使い方、故障・トラブル対処法
1 回答
0
Share (facebook)
177
view
全般

続：FirefoxでCSSの設定方法 ずっとIEで見ていたので現在F...

続：FirefoxでCSSの設定方法 ずっとIEで見ていたので現在FirefoxでのCSS指定を勉強しています。
入れ子でのheight設定について。

***CSS***
*{
margin:0;
padding:0;
}
body{
margin:0;
padding:0;
text-align:center;
}

#head_line{
margin:0 auto;
padding:0;
width:100%;
height:20px;
text-align:center;
background-color:#5971ef;
}

#wrapper{
margin:0 auto;
padding:0;
width:900px;
height:auto;
text-align:center;
border:1px solid #000000;
}

#floatbox1{
margin:0 auto;
padding:0;
width:200px;
height:auto;
text-align:center;
float:left;
}
#floatbox2{
margin:0 auto;
padding:0;
width:496px;
height:50px;
text-align:center;
float:left;
}
#floatbox3{
margin:0 auto;
padding:0;
width:200px;
height:auto;
text-align:center;
float:left;
}

#foot_line{
margin:0 auto;
padding:0;
width:100%;
height:20px;
text-align:center;
background-color:#5971ef;
clear:both;
}
***CSS***

<body>

<p id="head_line">head_title<p>
<div id="wrapper">
<div id="floatbox1">a</div>
<div id="floatbox2">s</div>
<div id="floatbox3">d</div>
</div>
<p id="foot_line">foot_title</p>

</body>

<div id="wrapper"></div>の高さが広がってくれないんです。
autoではだめですか？
Yahoo!知恵袋 6027日前
コメントする
お気に入り
1
質問者が選んだベストソリューション
floatによる高さ消失の問題ですね。（実際は消失ではなく、わかってしまえば当たり前の挙動なのですが・・）

手前味噌ですみませんが、こういったCSSの最初の段階でつまづきそうなものをまとめたエントリーを書いてますので、ぜひ読んでみてください。floatの問題に関しても図解で説明してます。

▼初心者が陥りそうなCSSの7の間違い
http://css-eblog.com/beginner/cssbeginer7.html

とりあえずURLだけだとあれなので、簡単に説明をすると
floatというのは、文字通り、指定した要素を「浮かせ（フロート）ます」。
つまり、floatさせた要素を持つ親要素（サンプルでは「#wrapper」です）
は、浮いた子要素を持つことになります。

浮いている、ということは、つまりその子要素の高さを把握できない、ということになります。
ですので、いくらmarginやpaddingを指定しても、実際には高さが0のため、0＋α、となります。
ただ、いくらCSSの仕様といっても、これでは不都合があります。
そこで登場するのが、クリアハック、と呼ばれるものです。

komutai_tkさんも言われてるように、「クリアする要素」をfloatの最後に追加してやれば、
正常に高さが確保されます。
その「クリアする要素」をCSSの記述だけで実現する方法です。

「css clearfix」あたりで検索すると色々出てくると思うので、
後学のためにも一度目を通しておくといいと思います。
Yahoo!知恵袋 6026日前
シェア
　
コメントする
　

参考になったと評価
　　このQ&Aは参考になりましたか？

Share (facebook)
その他の解決方法を知っていますか？
回答する
全般
60
Views
エレコムのWRH-300という、ホテルルーターを購入しましたが、繋が...
質問者が納得ちなみに、すでに使っているNECのルーターの設定は？ その部屋に来ているLANのポートの行き先は？ ネットの回線の詳細は？プロバイダはわかるけど、ADSLか光回線か？回線はフレッツなのか？ NECのルーターで既にPPPoEにしているなら、PPPoEマルチセッションが使えること、プロバイダからPPPoEのIDを二つ提供してもらわなければなりません。 新しいホテルルータ側の回線設定をPPPoEではなくてDHCPにして、既存のNECのルーターのLANポートに接続する手もあります。 ただし、新しいルーターのWAN側...
3940日前view60
全般
55
Views
pcが、起動すると、 American megatrends が、...
質問者が納得cmos date/time not set press f2 to enter どのようなPCでしょうか、マザーボード内蔵のボタン電池が消耗してる可能性が有ります。 とりあえず起動して[F2]でBIOS設定画面に入り日付と時刻を合わせてみてください、合わせたら[ESC][Save Setting and Exit]で再起動してください。
4480日前view55
全般
58
Views
Auto CAＤについて質問です ①画層プロパティ管理ダイアログには...
質問者が納得【１】０画層 【２】中心線 【３】white 【４】continuos 【５】ロード 【６】既定値 【７】0.18ｍｍ 【８】？ バージョンが、当方２００６のため、画層変更はツールバーで行っています。 その為、【８】の答えがダッシュボードであっているかどうか、不明です。 ほかは、多分、あってます。
4539日前view58
全般
40
Views
PC起動時に、American Megatrendsの画面が出て先に...
質問者が納得お書きになった内容の中にはトラブルは無いように思います。 ですが、この画面（BIOS）が自然に出てくるのは何か有ります。 メモリに異常があると、ビープ音と共に出たりする事もあります。 で、確認ですが「現在日時」が表示されていますか？ マザーボードのC-MOS用ボタン電池が消耗すると、「現在日時」がリセットされて、 BIOS画面が表示される機種があるようです。 ちなみにＨＤＤに関しては Ultra DMA Mode-5, S.M.A.R.T. Capable and Status OK ですので、今のとこ...
4580日前view40
全般
48
Views
Aviutlで動画編集をし、最終的にDVDｆｌｃｋでいＤＶＤにすると...
質問者が納得元ファイルは、カメラ撮りまたはDVDリッピングですか？ 無圧縮コーデックを使ったみたいですが、元ファイルがavi,mpg,etc.などの圧縮されたファイルを無圧縮にしても意味有りません。 逆に無圧縮コーデックを使った場合、圧縮が開放され6倍位大きなファイルに成る可能性があります。 元ファイルが圧縮など編集されたファイルに、無圧縮コーデックを使っても意味有りません。 DVDflcは細かい設定などは良いですが、タイトル、メニュー、タイトルメニュー画面でＢＧＭが付けられず字体も綺麗に設定できません。またタイトルメ...
4789日前view48

取扱説明書・マニュアル

1648view
http://www.kenko-tokina.co.jp/.../autos2j0.pdf
45 ページ5.85 MB
もっと見る

関連製品のQ&A

全般
ミノルタカメラα３０３SIスーパーの使い方
5697日前 α-303siview394
使い方・操作方法
ミラーアップを解除したい
4224日前 T3view477
全般
ﾃﾞｼﾞﾀﾙｶﾒﾗのｺﾆｶﾐﾉﾙﾀα７を使っています 、今の時期（冬...
5078日前 α-7view169
全般
ミノルタα-707siで花火撮影をしたいと思っています。望遠レンズを...
5218日前 α707siview140