ホームページ >ウェブフロントエンド >htmlチュートリアル >DIV+CSS 左右の高さが等しいlayout_html/css_WEB-ITnose
DIV+CSS 左右の高さが等しいlayout_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:27:391198ブラウズ
<!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=utf-8" /><title>无标题 1</title><style type="text/css">* { margin: 0; padding: 0;}body { margin:30px; font:14px/1.6em Verdana, Lucida, Arial, Helvetica, 宋体, sans-serif;}.main { overflow: hidden; width: 500px; margin: 0 auto;}.left { float: left; width: 250px; overflow: hidden;}.right { float: right; width: 245px; overflow: hidden;}.bor_top { height:1px; background:#FB9D51; overflow:hidden;}.equal { padding-bottom: 32767px; margin-bottom: -32767px;}.box { background: #F5E2AF; border: 1px #FB9D51 solid; padding-left:10px; padding-right:10px;}.mt5 { margin-top: 5px;}</style></head><body><div class="main"> <div class="left equal"> <div class="box"> <p>你相信这个左右等高的布局是纯的CSS写的吗？</p> </div> <div class="box mt5"> <p>来测试一下吧？~！</p> </div> <div class="box mt5"> <p>测试一下</p> </div> <div class="equal mt5 box"> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> </div> </div> <div class="equal right"> <div class="box"> <p>测试一下</p> <p>测试一下</p> </div> <div class="box mt5"> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> </div> <div class="box mt5"> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> </div> <div class="equal mt5 box"> <p>测试一下</p> <p>测试一下</p> <p>测试一下</p> </div> </div></div><div class="main"> <div class="left bor_top"></div> <div class="right bor_top"></div></div></body></html>
この左右の高さが同じレイアウトが純粋な CSS で書かれていると思いますか?
テストしに来ませんか？ ～！
テストしてください
テストしてください
テストしてください
テストしてください
テストしてください
テストしてください
テストしてください
テストしてください
テストしてください
テストしてください
テストしてください
テストしてください
テストしてください
テストしてください
テストしてください
テストしてください
テストしてください
テストしてください
テストしてください
テストしてください
テストしてください
テストしてみましょう テストしてみましょう
テストしてください
テストしてください
テストしてください
テストしてください
テストしてください
テストしてください
テストしてください
テストしてみよう
テストしてみよう
テストそれ
テストしてください
テストしてください
テストしてください
テストしてください
テストしてください
テストしてください
テストしてください
テストしてください
テストしてみよう
テストしてみよう
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。