• 网站首页
• 网站案例
• 小程序开发
• 网站推广
• 网站费用
• APP开发
• 关于我们
• 联系我们

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

查看费用明细

 
 
 
 #a {
 width: 200px;
 height: 100px;
 background: red;
 }
 #b {
 width: 200px;
 height: 100px;
 background: blue;
 }
 #c {
 width: 200px;
 height: 100px;
 background: green;
 }
 


 

执行效果：

浮动布局

我们先写两个div设置上背景颜色看看效果

 
 
 
 #lside {
 height: 200px;
 background: red;
 }
 #rside {
 height: 200px;
 background: green;
 }
 


 我是左边
 我是右边

上文也说ddiv的内容会自动地开始一个新行，所以想将两个div左右排列就要进行浮动布局

我们分别在CSS中加上float属性

 
 #lside {
 height: 200px;
 background: red;
 float: left;
 }
 #rside {
 height: 200px;
 background: green;
 float: right;
 }
 

效果如下图：

清除浮动

当有浮动布局和普通div共同存在时，会发生如下覆盖的情况

 
 
 
 #lside {
 height: 200px;
 background: red;
 float: left;
 }
 #rside {
 height: 300px;
 background: green;
 float: right;
 }
 #normal {
 height: 400px;
 background: blue;
 }
 


 我是左边
 我是右边
 我不设置浮动

所以如果不想被覆盖，就要清除浮动

在CSS中对普通元素设置clear属性

当我们增加 clear: left; 时，代表不让左边浮动盖着自己

 #normal {
 height: 400px;
 background: blue;
 clear: left;
 }

此时清除左浮的div就会贴着左浮的div下边显示，如图：

同样的还可设置 clear: right; 代表不让右边浮动盖着自己；设置 clear: both; 代表不让浮动盖着自己。这里不做演示

关于“CSS如何设置每个div的宽高和背景色”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注创新互联行业资讯频道，小编每天都会为大家更新不同的知识点。

• 建站热线：13518219792
• 
  微信扫一扫在线咨询
• QQ客服：
• 案 例
• 价 格