百宝箱教你实现5个DIV并排在一行的解决方案

作者(出处):百宝箱工作室发布时间:2014年12月27日 17:48:58查阅量:1232

<html>
<head>
<title>百宝箱教你实现5个DIV并排在一行的解决方案</title>
<style type="text/css">
.baibaox{
 margin:0 auto;/*上下边距是0,左右自动调整 */
 width:950px;
}
.baibaox .div1{
 float:left;
 background:#0000FF;
 width:150px;
}
.baibaox .div2{
 float:left;
 background:#FFFF00;
 width:200px;
}
.baibaox .div3{
 float:left;
 background:#FF00FF;
 width:200px;
}
.baibaox .div4{
 float:left;
 background:#00FF00;
 width:200px;
}
.baibaox .div5{
 float:right;
 background:#FF0000;
 width:200px;
}
</style>
</head>
<body>
<div class="baibaox">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
<div class="div5">div5</div>
</div>
</body>
</html>
百宝箱网络工作室  版权所有  
站长QQ:1617818397  站长E-mail:1617818397@qq.com
Powered by www.baibaox.com  Copyright © 2011-2018
点击这里给我发消息  
若本文对您有帮助,请扫码打赏,您的赞助就是最好的动力