<!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>
<title>左中右版式</title>
<style type="text/css">
body
{
margin: 0px;
padding: 0px;
font-family: Arial;
color: #060;
background-color: #dddddd;
}
#banner
{
margin:0px;
}
#mainBox
{
margin:0px;
}
#left
{
position: relative;
top: 0px;
left: 0px;
margin: 0px;
background: #cce9ff;
width: 190px; /* 固定宽度 */
}
#middle
{
padding: 10px;
background: #ffffff;
margin: 0px 190px 0px 190px; /* 左右空190px */
margin-top: 0px;
}
#right
{
position: relative;
top: 0px;
right: 0px;
margin: 0px;
background: #cce9ff;
width: 190px;
}
p
{
font-size: 12px;
margin: 20px 0px 0px 20px;
padding: 10px;
}
pre
{
font-size: 12px;
line-height: 20px;
margin: 20px 0px 10px 0px;
font-family: arial;
}
</style>
</head>
<body>
<div id="banner"><img src="banner1.jpg" alt="" />
</div>
<div id="mainBox">
<div id="left">
<p>
left</p>
</div>
<div id="middle">
<pre>
body{
margin:0px; padding:0px;
font-family:arial;
color:#060;
background-color:#CCC;
}
#left{
position:absolute;
top:0px;
left:0px;
margin:0px;
background:#FFF;
190px;/* 固定宽度 */
}
#middle{
padding:10px;
background:#FFF;
margin:0px 190px 0px 190px;/* 左右空190px */
margin-top:0px;
}
#right{
position:absolute;
top:0px;
right:0px;
margin:0px;
background:#FFF;
190px;/* 固定宽度 */
}
p{
font-size:12px;
line-height:22px;
margin:20px 0px 10px 0px;
padding:10px;
}
pre{
font-size:12px;
line-height:20px;
margin:20px 0px 10px 0px;
font-family:arial;
}
</pre>
</div>
<div id="right">
<p>
right</p>
</div>
</div>
<div id="footer">aappooiiuuyy</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>左中右版式</title>
<style type="text/css">
body
{
margin: 0px;
padding: 0px;
font-family: Arial;
color: #060;
background-color: #dddddd;
}
#banner
{
margin:0px;
}
#mainBox
{
margin:0px;
}
#left
{
position: relative;
top: 0px;
left: 0px;
margin: 0px;
background: #cce9ff;
width: 190px; /* 固定宽度 */
}
#middle
{
padding: 10px;
background: #ffffff;
margin: 0px 190px 0px 190px; /* 左右空190px */
margin-top: 0px;
}
#right
{
position: relative;
top: 0px;
right: 0px;
margin: 0px;
background: #cce9ff;
width: 190px;
}
p
{
font-size: 12px;
margin: 20px 0px 0px 20px;
padding: 10px;
}
pre
{
font-size: 12px;
line-height: 20px;
margin: 20px 0px 10px 0px;
font-family: arial;
}
</style>
</head>
<body>
<div id="banner"><img src="banner1.jpg" alt="" />
</div>
<div id="mainBox">
<div id="left">
<p>
left</p>
</div>
<div id="middle">
<pre>
body{
margin:0px; padding:0px;
font-family:arial;
color:#060;
background-color:#CCC;
}
#left{
position:absolute;
top:0px;
left:0px;
margin:0px;
background:#FFF;
190px;/* 固定宽度 */
}
#middle{
padding:10px;
background:#FFF;
margin:0px 190px 0px 190px;/* 左右空190px */
margin-top:0px;
}
#right{
position:absolute;
top:0px;
right:0px;
margin:0px;
background:#FFF;
190px;/* 固定宽度 */
}
p{
font-size:12px;
line-height:22px;
margin:20px 0px 10px 0px;
padding:10px;
}
pre{
font-size:12px;
line-height:20px;
margin:20px 0px 10px 0px;
font-family:arial;
}
</pre>
</div>
<div id="right">
<p>
right</p>
</div>
</div>
<div id="footer">aappooiiuuyy</div>
</body>
</html>
p标签包含的范围
p标签的父标签<div id="left">包含的范围
为什么出现如上结果呢？
因为父标签没设置padding属性的原因。
而此问题在ie6不存在。