ホームページ >ウェブフロントエンド >htmlチュートリアル >float属性使用時に親要素の高さを適応できない問題の解決策layout_html/css_WEB-ITnose
float属性使用時に親要素の高さを適応できない問題の解決策layout_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:28:391660ブラウズ
Webページのレイアウト処理では、ページの左右のレイアウトを実現するためにfloat属性がよく使われますが、親要素の高さをページの高さに応じて適応できないという問題があります。子要素。たとえば、次のコード:
rrree
ブラウザで表示した場合の効果は次のとおりです:
場合によっては、親要素が子要素の高さに応じて適応できるようにする必要があります。この場合、親 div を指定するだけで済みます。overflow:hidden を追加するだけです。例:
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>title</title></head><body> <div align="center" style="border: 1px solid blue;"> p <div style="float:left;width:45%;height:200px;border: 1px solid green;"> left </div> <div style="float:right;width:45%;height:150px;border: 1px solid red;">right</div> </div></body></html>
このようにして、親要素の高さを子要素の高さに応じて調整できます。次のようにブラウザで効果を表示します。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。