1.html 并列多个DIV多种显示方式。
<!doctype html>
<
style
type
=
"text/css"
>
#pages {width:900px;background-color:black;margin:auto;}
#d1 {width:200px;height:100px;float:left;background-color:red;}
#d2 {width:200px;height:100px;float:left;background-color:yellow;}
#d3 {width:200px;height:100px;float:left;background-color:green;}
#d4 {width:200px;height:100px;float:left;background-color:green;}
</
style
>
<
div
id
=
"pages"
>
<
div
id
=
"d1" style="float:right"
></
div
>
<
div
id
=
"d2" style="float:left"
></
div
>
<div
id
=
"d3" tyle="float:left"
></
div
>
<div
id
=
"d4"style="float:left"
></
div
>
</
div
>
2.利用宽度比例设置
<!doctype html>
<
style
type
=
"text/css"
>
#pages {width:100%;background-color:black;margin:auto;}
#d1 {width:10%;height:40px;float:right;background-color:white;}
#d2{width:40%;height:40px;float:left;background-color:white;}
#d3{width:20%;height:40px;float:left;background-color:white;}
#d4{width:30%;height:40px;float:left;background-color:white;}
</
style
>
<
div
id
=
"pages"
>
<
div
id
=
"d1" style="float:right"
></
div
>
<
div
id
=
"d2" style="float:left"
></
div
>
<div
id
=
"d3" style="float:left"
></
div
>
<div
id
=
"d4" style="float:left"
></
div
>
</
div
>
以上两种就可以设置并列div了。