[分享]css两个可变容器并列

CSS 可以实现多种排版效果，其中一种是将两个可变容器并列显示。要实现这种效果，我们可以使用 CSS 的 float 属性和宽度属性来控制元素的位置和大小。.container { width: 10...

CSS 可以实现多种排版效果，其中一种是将两个可变容器并列显示。

要实现这种效果，我们可以使用 CSS 的 float 属性和宽度属性来控制元素的位置和大小。

.container {
  width: 100%;
}

.box {
  float: left;
  width: 50%;
  height: 300px;
}

.box-1 {
  background-color: #f0f0f0;
}

.box-2 {
  background-color: #ccc;
} 

以上代码中，.container 为两个容器的父元素，宽度设置为 100%；.box 为容器元素，使用 float: left 属性来实现左右并列，设置宽度为 50%。同时，为了使容器有高度，我们需要为 .box 设置一个固定的高度。.box-1 和 .box-2 则是两个具体的容器元素，使用不同的背景色来区分。

使用以上代码，我们可以将两个容器元素并排显示，而且他们的宽度可以根据容器的大小来自适应，非常灵活。