时间：2023-09-08 01:06:01 | 来源：网站运营
时间：2023-09-08 01:06:01 来源：网站运营
CSS利用浮动与定位进行网页布局：
在线咨询
<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy7499')">web学习群：751196913</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy7499><div id="main"> <div id="box1">box1</div> <div id="box2">box2</div> <div class="clear"></div></div>#main{ width:100%; }#box1{ float:left; width:40%;}#box2{ float:right; width:60%;}.clear{ clear:both;}</td> </tr> </table>这是一个一行两列的例子，其中clear的作用是不让浮动元素下面的元素环绕在它周围。<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下：</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy7804')">web学习群：751196913</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy7804><div id="main"> <div id="box1">box1</div> <div id="box2">box2</div></div> #main{ position:relative;width:100%;}#box1{ position:absolute; top:0; left:0; width:40%;}#box2{position:absolute; top:0; right:0; width:60%;}</td> </tr> </table>通常，做弹出菜单的时候，我会用到定位，父元素相对定位position:relative，其中的子元素绝对定位position:absolute，通过top，right，bottom，left的值来控制子元素的位置，要注意的是子元素的位置将相对于父元素，而不是整个页面。关键词：布局,定位,利用,浮动
