[分享]css中怎么把盒子一分为二

CSS中，我们可以通过一些方法来将盒子分为两部分，可以在页面设计中起到很好的美化作用，并且可以让页面结构更加清晰。下面介绍两种方法：//方法一：使用float .left{ width:50; flo...

CSS中，我们可以通过一些方法来将盒子分为两部分，可以在页面设计中起到很好的美化作用，并且可以让页面结构更加清晰。

下面介绍两种方法：

//方法一：使用float
.left{
   width:50%;
   float:left;
}

.right{
   width:50%;
   float:right;
}

//方法二：使用flex布局
.row{
   display:flex;
}

.left{
   flex:1;
}

.right{
   flex:1;
} 

方法一是通过使用float属性实现左右两个盒子的浮动，将它们分别设置为宽度为50%即可实现等分的效果。不过需要注意的是在实际应用时，需要清除浮动。

方法二是通过使用flex布局，实现了相同的效果。将父容器的display属性设置为flex，子元素的flex属性设置为1，即可实现等分的效果。flex布局相比于float更加方便和灵活，并且可以用于更多的布局需求。