css 页面布局左侧两个上下排放右侧一个竖着排放

CSS页面布局可以使用Flexbox或Grid来实现这种结构，其中左侧分为两栏，一上一下排列，右侧则是一个垂直堆叠的内容。下面是一个简单的例子：

1. **使用Flexbox**:

.container {
  display: flex;
  justify-content: space-between; /* 左右分隔 */
}

.left-side {
  flex: 0 0 50%; /* 宽度占50%，左右对等 */
  display: flex;
  flex-direction: column; /* 左侧两栏竖向排列 */
}

.left-side > div {
  flex: 1; /* 自动分配剩余空间 */
}

.right-side {
  flex: 0 0 calc(50% - 20px); /* 右侧宽度占49%，减去一些间距 */
}

在这个例子中，`.left-side`是一个flex容器，包含两个子元素，每个元素默认占用整个宽度的一半。`.right-side`占据剩下的50%，并且有边距来与左边保持一定距离。

2. **使用Grid**:

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr) auto; /* 初始列数2，左2列，右1列 */
  gap: 20px; /* 边距 */
}

.left-grid {
  grid-column: 1 / span 2; /* 占据前两列 */
}

.right-item {
  grid-column: 3; /* 单独占据第三列 */
}

这里假设`.left-grid`和`.right-item`是网格容器下的直接子项，`.left-grid`跨越两列，`.right-item`单独在一列。