[分享]css两个框合并

在网页设计中，如何实现两个框的合并？这就需要使用CSS技术，以下是一些简单的合并框示例。

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

.box2{
    width: 200px;
    height: 100px;
    background-color: blue;
    float: right;
}

.container{
    overflow: hidden;
} 

上述代码会生成两个颜色不同的框，其中一个框向左浮动，另一个向右浮动，但是它们在同一行中相互靠拢。要想将它们合并在一起，我们需要在它们的共同容器中添加以下CSS代码：

.container{
    overflow: hidden;
    width: 300px; /*总宽度为两个框的宽度之和*/
    height: 100px; /*框的高度*/
} 

这时两个框就会合并在一起，并在容器中居中显示。通过修改容器的宽度和高度，我们可以自定义合并框的大小和形状。