两种跨浏览器的自适应高的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 class=page1> <p align="center" class="pageLink"></p> </div> <div 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 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">

学习交流