html 并列多个DIV - dwtfukgv

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

　转载：https://blog.csdn.net/cw2004100021124/article/details/40297263

posted on 2018-06-20 21:13 dwtfukgv 阅读(669) 评论(0) 收藏举报

刷新页面返回顶部