原因:div为块级元素,默认占一行高度
解决方法1:两个div都添加样式 display:inline-block;
(如值为inline
,设置宽高失效,div靠内容撑起)
代码:
<style>
.box1{
height: 200px;
width:200px;
display: inline-block;
background-color: #008000;
}
.box2{
height: 200px;
width:200px;
display: inline-block;
background-color: #8A2BE2;
}
</style>
解决方法2:两个div都添加样式 float:left;
(后面不在同行的div设置 clear:both;
清除浮动)
代码:
<style>
.box1{
height: 200px;
width:200px;
float:left;
background-color: #008000;
}
.box2{
height: 200px;
width:200px;
float:left;
background-color: #8A2BE2;
}
.box3{
height: 200px;
width:200px;
clear: both;
background-color: #FA8072;
}
</style>