css两个盒子并排 |css 图片悬浮在页面上

.box1 {
width: 50%;
height: 100px;
background-color: red;
float: left;
}
.box2 {
width: 50%;
height: 100px;
background-color: blue;
float: left;
}

上面的代码中，大家定义了两个样式分别为box1和box2，它们的宽度都是50%，高度是100px。同时大家对这两个盒子都设置了float:left，这样它们就能在同一行中并排显示。

在HTML中，大家可以这样使用：

<div class="box1"></div>
<div class="box2"></div>

这样，大家就实现了两个盒子并排的效果。