<!

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;

    width: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;

    width: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不存在。