css一个盒子里面放两个盒子

在编写网页时，我们常常需要将一个盒子分成两个盒子，实现页面布局的效果，这时候就需要使用CSS来实现。

首先，我们需要先定义一个大的盒子，然后将其设置为一个容器，可以使用以下代码：

.container {
  width: 500px; /*设置容器宽度*/
  height: 300px; /*设置容器高度*/
  background-color: #eee; /*设置背景颜色*/
  display: flex; /*设置容器为弹性布局*/
} 

接下来，我们需要在容器里定义两个小盒子，分别为左盒子和右盒子。我们可以使用以下代码：

.left-box {
  width: 200px; /*设置左盒子宽度*/
  height: 250px; /*设置左盒子高度*/
  background-color: #ccc; /*设置左盒子背景颜色*/
}

.right-box {
  width: 250px; /*设置右盒子宽度*/
  height: 250px; /*设置右盒子高度*/
  background-color: #f0f0f0; /*设置右盒子背景颜色*/
} 

最后，我们需要将左盒子和右盒子放入容器内，可以使用以下代码：

<div class="container">
  <div class="left-box"></div>
  <div class="right-box"></div>
</div> 

这样，我们就实现了在一个盒子里面放两个盒子的效果。