层的定位和布局解决思路
日期：2014-05-17 浏览次数：20602 次
层的定位和布局
假设我要用层实现和下面的table一样的效果：
<table border= "1 " align= "center " width= "800 " bordercolor= "red " cellpadding= "1px ">
<tr> <td colspan= "3 " > head </td> </tr>
<tr> <td> left-1 </td> <td> mid-1 </td> <td> right-1 </td> </tr>
<tr> <td> left-2 </td> <td> mid-2 </td> <td> right-2 </td> </tr>
<tr> <td colspan= "2 "> leftmid-3 </td> <td> right-3 </td> </tr>
<tr> <td colspan= "3 "> bottom </td> </tr>
</table>
要求必须一模一样，为了区分不同的层，可以加上颜色，无论浏览器大小如何变化，网页仍然能保持原样，不会出现伸缩，错位等，当浏览器大小无法显示整个页面的时候出现滚动条。完全用div + css 实现，在IE和Firefox上面均能正常显示。
------解决方案--------------------
我看看，应该可以的
------解决方案--------------------
<!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 ">
<title> 1 </title>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<style type= "text/css ">
<!--
.clear{clear:both; margin:0; padding:0;}
#main {
margin: 0 auto;
width: 800px;
border: 1px solid red;
}
#main #head {
padding:1px;
margin:2px;
border: 1px solid red;
}
#main #middle { margin:0; padding:0;}
#main #middle #left {
width: 493px;
float: left;
overflow: hidden;
}
#main #middle #right {
float: left;
width: 304px;
}
.leftmiddle {
margin: 1px;
border: 1px solid red;
padding: 1px 0 1px 1px;
float: left;
width: 487px;
}
.right_item{
margin:1px;
padding:1px;
border: 1px solid red;
float: left;
width: 299px;
}
.left_item{
margin:1px;
padding:1px;
border: 1px solid red;
width: 240px;
float: left;
}
#bottom{
padding:1px;
margin:2px;
border: 1px solid red;
}
-->
</style>
</head>
<body bgcolor= "#FFFFFF " leftmargin= "0 " topmargin= "0 " marginwidth= "0 " marginheight= "0 ">
<div id= "main ">
<div id= "head "> Head </div>
<div id= "middle ">
<div id= "left ">
<div class= "left_item "> left1 </div>
<div class= "left_item "> middle1 </div>
<div class= "left_item "> left2 </div>
<div class= "left_item "> middle2 </div>
<div class= "leftmiddle "> left_middle </div>
</div>
<div id= "right ">
<div class= "right_item "> right </div>
<div class= "right_item "> right </div>
<div class= "right_item "> right </div>
</div>
<div class= "clear "> </div>
</div>
<div id= "bottom "> bottom </div>
</div>
</body>
</html>
以上代码只考虑到每格都只一行内
假设我要用层实现和下面的table一样的效果：
<table border= "1 " align= "center " width= "800 " bordercolor= "red " cellpadding= "1px ">
<tr> <td colspan= "3 " > head </td> </tr>
<tr> <td> left-1 </td> <td> mid-1 </td> <td> right-1 </td> </tr>
<tr> <td> left-2 </td> <td> mid-2 </td> <td> right-2 </td> </tr>
<tr> <td colspan= "2 "> leftmid-3 </td> <td> right-3 </td> </tr>
<tr> <td colspan= "3 "> bottom </td> </tr>
</table>
要求必须一模一样，为了区分不同的层，可以加上颜色，无论浏览器大小如何变化，网页仍然能保持原样，不会出现伸缩，错位等，当浏览器大小无法显示整个页面的时候出现滚动条。完全用div + css 实现，在IE和Firefox上面均能正常显示。
------解决方案--------------------
我看看，应该可以的
------解决方案--------------------
<!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 ">
<title> 1 </title>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<style type= "text/css ">
<!--
.clear{clear:both; margin:0; padding:0;}
#main {
margin: 0 auto;
width: 800px;
border: 1px solid red;
}
#main #head {
padding:1px;
margin:2px;
border: 1px solid red;
}
#main #middle { margin:0; padding:0;}
#main #middle #left {
width: 493px;
float: left;
overflow: hidden;
}
#main #middle #right {
float: left;
width: 304px;
}
.leftmiddle {
margin: 1px;
border: 1px solid red;
padding: 1px 0 1px 1px;
float: left;
width: 487px;
}
.right_item{
margin:1px;
padding:1px;
border: 1px solid red;
float: left;
width: 299px;
}
.left_item{
margin:1px;
padding:1px;
border: 1px solid red;
width: 240px;
float: left;
}
#bottom{
padding:1px;
margin:2px;
border: 1px solid red;
}
-->
</style>
</head>
<body bgcolor= "#FFFFFF " leftmargin= "0 " topmargin= "0 " marginwidth= "0 " marginheight= "0 ">
<div id= "main ">
<div id= "head "> Head </div>
<div id= "middle ">
<div id= "left ">
<div class= "left_item "> left1 </div>
<div class= "left_item "> middle1 </div>
<div class= "left_item "> left2 </div>
<div class= "left_item "> middle2 </div>
<div class= "leftmiddle "> left_middle </div>
</div>
<div id= "right ">
<div class= "right_item "> right </div>
<div class= "right_item "> right </div>
<div class= "right_item "> right </div>
</div>
<div class= "clear "> </div>
</div>
<div id= "bottom "> bottom </div>
</div>
</body>
</html>
以上代码只考虑到每格都只一行内
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
