ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS 等高レイアウト、3div は最も高い高さに適応_html/css_WEB-ITnose
CSS 等高レイアウト、3div は最も高い高さに適応_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:27:181076ブラウズ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS等高布局</title> <style type="text/css"> *{ margin:0; padding:0; } #wrap{ width:1000px; margin:0 auto; overflow:hidden; zoom:1;/* for ie6 */ } #left,#center,#right{ margin-bottom:-10000px; padding-bottom:10000px; } #left{ float:left; width:250px; background:#00FFFF; } #center{ float:left; width:500px; background:#FF0000; } #right{ float:right; width:250px; background:#00FF00; } </style> </head> <body> <div id="wrap"> <div id="left"> <p>left</p> <p>left</p> <p>left</p> <p>left</p> <p>left</p> </div> <div id="center"> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> </div> <div id="right"> <p>right</p> <p>right</p> <p>right</p> </div> </div> </body> </html>
子 div: margin-bottom:-1000px;
親 div: overflow:hidden; ボックスをプッシュに移動しますdown は高さを高くします; margin-bottom:-1000px; は、親 div がコンテンツ エンティティの高さまで上向きに縮小することを許可し、親 div の縮小をブロックします。 3 つの div は同じ高さです。実際、負のマージンが設定されているため、空白スペースの高さはパディングであり、コンテンツのレイアウトに使用できます
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。