ホームページ >ウェブフロントエンド >htmlチュートリアル >Float 例の説明_html/css_WEB-ITnose
Float 例の説明_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:57:101175ブラウズ
float の例の説明
実際のフロントエンド開発プロセスでは、float はレイアウトによく使用されますが、うまく使用されない場合があります。大変ですね、ああ。
たとえば、左側の列の幅は固定で、右側の列は自動的に拡張される 2 列のレイアウトを実装したいとします。
以下のレンダリングを参照してください:
アイデア: div+float を使用します。div1 は左側の列、div2 は右側の列で、幅を設定します。 div1 を固定幅にし、ドキュメント フローから外して div2 を左フローティングに設定すると、通常のフローでは問題ありません。
以下の具体的なコードとレンダリングを参照してください:
<!DOCTYPE html> <head> <title>width_layout</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <style type="text/css"> .content { min-width:300px; } .div1 { width:200px; height:300px; background:green; float:left; } .div2 { height:300px; background:pink; } </style> </head> <body> <div class="content"> <div class="div1"></div> <div class="div2"></div> </div> </body></html>View Code
一見したところ、ブラウザの幅を手動で変更すると、div1 の幅が固定されており、div2 の幅も適応的です。
しかし、div2 にコンテンツを追加したらどうなるでしょうか?
幅と高さが 100px の青い div を div2 の子要素として使用した場合の効果を見てみましょう。
クソ、これは上記と同じではありませんか。私の青い div はどこにありますか? ！ ！
Chrome デバッガーを開いて何が起こっているのかを確認してください
私が書いた div3 はドキュメント フロー内にありますが、div1 によってブロックされていることがわかります。
どうしてこんなことが起こるのでしょうか?
これは、フローティングされた要素がドキュメント フローから切り離されるためです。つまり、div2 は div1 がドキュメント フロー内にないと考えているため、div2 は div1 の存在を無視して自身を表示しますが、div1 がフローティングされた後は、これはドキュメント フローの上位層にあるため、div1 はその下の通常のドキュメント フローをカバーします。
ねえ、div2 に div3 を表示するにはどうすればよいですか?
効果は下の図に示されています
上記の効果を提示するだけであれば、div3 の表示を inline-block に設定できます。信じられない場合は、自分でコードを実行してみてください。
以下は修正コードです
<!DOCTYPE html> <head> <title>width_layout</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <style type="text/css"> .content { min-width:300px; } .div1 { width:200px; height:300px; background:green; float:left; } .div2 { height:300px; background:pink; } .div3 { width:100px; height:100px; display:inline-block; background:blue; } </style> </head> <body> <div class="content"> <div class="div1"></div> <div class="div2"> <div class="div3"></div> </div> </div> </body></html>View Code なぜこれが起こるのでしょうか?
float の本来の目的は、テキストが浮動要素の周囲を回り込み、インライン要素が浮動要素の周囲を回り込めるようにすることであるためです。
つまり、div3 を削除して、それを大量のテキスト (div1 を囲むのに十分な量) に置き換えると、div2 の高さを div1 よりも少し高く設定し、ブラウザの幅を手動で徐々に変更します。を実行すると、テキストが div1 の周囲で折り返されていることがわかります。
下の図を参照してください
<!DOCTYPE html> <head> <title>width_layout</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <style type="text/css"> .content { min-width:300px; } .div1 { width:200px; height:300px; background:green; float:left; } .div2 { height:500px; background:pink; } </style> </head> <body> <div class="content"> <div class="div1"></div> <div class="div2"> 豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而 带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。 时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖騑于上路，访风景于崇阿。临帝子之长洲，得仙人之旧馆。层峦耸翠，上出重霄；飞阁流丹，下临无地。鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，列冈峦之体势。 披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。闾阎扑地，钟鸣鼎食之家；舸舰迷津，青雀黄龙之舳。云销雨霁，彩彻区明。落霞与孤鹜齐飞，秋水共长天一色。渔舟唱晚，响穷彭蠡之滨，雁阵惊寒，声断衡阳之浦。 遥吟俯畅，逸兴遄飞。爽籁发而清风生，纤歌凝而白云遏。睢园绿竹，气凌彭泽之樽；邺水朱华，光照临川之笔。四美具，二难并。穷睇眄于中天，极娱游于暇日。天高地迥，觉宇宙之无穷；兴尽悲来，识盈虚之有数。望长安于日下，目吴会于云间。地势极而南溟深，天柱高而北辰远。关山难越，谁悲失路之人；萍水相逢，尽是他乡之客。怀帝阍而不见，奉宣室以何年？ 嗟乎！时运不齐，命途多舛。冯唐易老，李广难封。屈贾谊于长沙，非无圣主；窜梁鸿于海曲，岂乏明时？所赖君子安贫，达人知命。老当益壮，宁移白首之心？穷且益坚，不坠青云之志。酌贪泉而觉爽，处涸辙以犹欢。北海虽赊，扶摇可接；东隅已逝，桑榆非晚。孟尝高洁，空余报国之情；阮籍猖狂，岂效穷途之哭！ 勃，三尺微命，一介书生。无路请缨，等终军之弱冠；有怀投笔，慕宗悫之长风。舍簪笏于百龄，奉晨昏于万里。非谢家之宝树，接孟氏之芳邻。他日趋庭，叨陪鲤对；今兹捧袂，喜托龙门。杨意不逢，抚凌云而自惜；钟期既遇，奏流水以何惭？ 呜乎！胜地不常，盛筵难再；兰亭已矣，梓泽丘墟。临别赠言，幸承恩于伟饯；登高作赋，是所望于群公。敢竭鄙怀，恭疏短引；一言均赋，四韵俱成。请洒潘江，各倾陆海云尔： 滕王高阁临江渚，佩玉鸣鸾罢歌舞。 画栋朝飞南浦云，珠帘暮卷西山雨。 闲云潭影日悠悠，物换星移几度秋。 阁中帝子今何在？槛外长江空自流。 </div> </div> </body></html> View Code
ブロックレベルの要素を div2 に追加したい場合はどうすればよいですか?つまり、div1 と div2 を互いに干渉しない 2 つのモジュールにしたいのですが、これらにコンテンツを追加しても影響はありません。
その後、マージンまたはパディングを使用できます。 div2 (適応幅) の margin-left または padding-left を div1 (固定幅) のサイズに設定するだけです。ここで設定したのはmargin-leftです。
<!DOCTYPE html> <head> <title>width_layout</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <style type="text/css"> .content { min-width:300px; } .div1 { width:200px; height:300px; background:green; float:left; } .div2 { height:300px; background:pink; margin-left:200px; } .div3 { width:100px; height:100px; background:blue; } </style> </head> <body> <div class="content"> <div class="div1"></div> <div class="div2"> <div class="div3"></div> </div> </div> </body></html>View Code さて、今日はここまでです。最後に、明日は皆さんにとって幸せなバレンタインデーになりますように〜