首頁 > web前端 > html教學 > DIV+CSS左右等高布局_html/css_WEB-ITnose

DIV+CSS左右等高布局_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 12:27:39
原創
1222 人瀏覽過

 <!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写的吗?

来测试一下吧?~!

测试一下

测试一下

测试一下

测试一下

测试一下

测试一下

测试一下

测试一下

测试一下

测试一下

测试一下

测试一下

测试一下

测试一下

测试一下

测试一下

测试一下

测试一下

测试一下

测试一下

测试一下

测试一下

测试一下

测试一下

测试一下

测试一下

测试一下

测试一下

测试一下

测试一下

测试一下

测试一下

测试一下

测试一下

测试一下

测试一下

测试一下

测试一下

测试一下

测试一下

测试一下

测试一下

测试一下

测试一下

测试一下

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板