html 并列多个DIV

转载

mb5fe55a71c1d08 2018-06-20 21:13:00

文章标签 d3 html css .net 显示方式 文章分类 代码人生

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了。