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
