兩種跨瀏覽器的自適應高的css代碼

2024-07-11 08:37:42

字體：大中小

來源：轉載

供稿：網友

好久沒發了，今天剛學了點東東，順便挖過來，happy一下
第一種：代碼：

<br /><!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”><br /><html><br /><head><br /><meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ /><br /><title></title><br /><style type=”text/css”><br />.div1{width:30%;padding-bottom:32767px;margin-bottom:-32767px;float:left}<br />.div2{width:40%;padding-bottom:32767px;margin-bottom:-32767px;float:left}<br />.div3{width:30%;padding-bottom:32767px;margin-bottom:-32767px;float:left}<br /></style><br /></head><br /><body><br /><div style=”width:100%;overflow:hidden”><br /><div class=”div1″ style=”background-color:Lime”><br />1dd<br /></div><br /><div class=”div2″ style=”background-color:Fuchsia”><br />2<br /></div><br /><div class=”div3″ style=”background-color:Olive”><br />一<br><br />二<br><br />三<br><br />四<br><br />五<br><br />六<br><br />七<br><br />八<br><br />九<br><br /></div><br /></div><br /></body><br /></html><br />
提示：您可以先修改部分代碼再運行
說實話上面一種辦法，我根本不理解
第二種方法，比較好理解，
采用相對定位，背景和文字是分離的
代碼

<br /><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><br /><html xmlns=”http://www.w3.org/1999/xhtml”><br /><head><br /><title>無標題頁</title><br /><style type=”text/css”><br />*{margin:0px; padding:0px; font-size:12px;}<br />#container3<br />{ width:100%;<br />background:red;<br />float:left;<br />position:relative;<br />overflow:hidden;<br />}<br />#container2<br />{ width:100%;<br />background:yellow;<br />float:left;<br />position:relative;<br />right:30%;<br />}<br />#container1<br />{ width:100%;<br />background:green;<br />float:left;<br />position:relative;<br />right:40%;<br />}<br />#container1 .content1<br />{<br />float:left;<br />width:30%;<br />position:relative;<br />left:70%;<br />white-space:normal; word-break:break-all;<br />overflow:hidden;<br />}<br />#container1 .content2<br />{<br />float:left;<br />width:40%;<br />position:relative;<br />left:70%;<br />white-space:normal; word-break:break-all;<br />overflow:hidden;<br />}<br />#container1 .content3<br />{<br />float:left;<br />width:30%;<br />position:relative;<br />left:70%;<br />white-space:normal; word-break:break-all;<br />overflow:hidden;<br />}<br /></style><br /></head><br /><body><br /><div id=”container3″> </SPAN> </div> </div> <div id="iwvjtn8m0" class=page1> <p align="center" class="pageLink"></p> </div> <div id="iwvjtn8m0" class="fenxiang">  <div style="text-align:left">上一篇：<a href='/wen/2024/07-11/1342667.html'>學習web標準的十個重要理由總結</a></div> <br> <div style="text-align:left">下一篇：<a href='/wen/2024/07-11/1342669.html'>web開發中怎么樣使css書寫規范?</a></div> <br> <script src=/d/js/acmsd/gao21.js></script>  </div> <div id="iwvjtn8m0" class="pinglun">  <script> function CheckPl(obj) { if(obj.saytext.value=="") { alert("您沒什么話要說嗎？"); obj.saytext.focus(); return false; } return true; } </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)"> <table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="title"> <tr> <td><strong>發表評論</strong></td> <td align="right"><a href="/e/pl/?classid=215&id=1342668">共有<span><script type="text/javascript" src="/e/public/ViewClick/?classid=215&id=1342668&down=2"></script></span>條評論</a></td> </tr> </table> <table width="100%" border="0" cellspacing="10" cellpadding="0"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="2"> <tr> <td width="56%" align="left">用戶名: <input name="username" type="text" class="inputText" id="username" value="" size="16" /></td> <td width="44%" align="left">密碼: <input name="password" type="password" class="inputText" id="password" value="" size="16" /></td> </tr> <tr> <td align="left">驗證碼: <input name="key" type="text" class="inputText" size="10" /> <img src="/e/ShowKey/?v=pl" align="absmiddle" /> </td> <td align="left"><input name="nomember" type="checkbox" id="nomember" value="1" checked="checked" /> 匿名發表</td> </tr> </table> <textarea name="saytext" cols="70" rows="6" id="saytext">

學習交流