[分享]css两个选区布局

CSS是一种描述样式的语言，它可以改变HTML文档中的元素的外观和布局。其中一个最重要的布局就是选区布局。选区布局是指在同一个盒子内使用两个选区分别放置不同的元素。下面将介绍两种选区布局的实现方法。/...

CSS是一种描述样式的语言，它可以改变HTML文档中的元素的外观和布局。其中一个最重要的布局就是选区布局。选区布局是指在同一个盒子内使用两个选区分别放置不同的元素。下面将介绍两种选区布局的实现方法。

/* 第一种选区布局 */
.container {
  display: flex;
  justify-content: center;
}

.left {
  order: 1;
}

.right {
  order: 2;
} 

上面的代码展示了第一种选区布局的实现方法。用到的CSS属性是flex和order。首先使用flex将容器设置为伸缩布局，这样里面的子元素就能够随着容器的大小自动调整位置和尺寸。而使用order则是控制每个子元素在伸缩布局中的排列顺序。将左边的选区设置为order: 1，右边的选区设置为order: 2，这样左边的元素就会被优先放置在右边的元素前面。

/* 第二种选区布局 */
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.left {
  grid-column-start: 1;
  grid-column-end: 2;
}

.right {
  grid-column-start: 2;
  grid-column-end: 3;
} 

上面的代码展示了第二种选区布局的实现方法。用到的CSS属性是grid和grid-template-columns。将容器设置为网格布局，这样就可以把整个容器划分为若干个网格。使用grid-template-columns将容器的列数设置为2，这样就可以得到两个相等的选区。接下来，使用grid-column-start和grid-column-end来确定每个选区的起始列和结束列，左边的选区起始列为1，结束列为2，右边的选区起始列为2，结束列为3，这样两个选区就能够平分整个容器的宽度了。