css等比例分割父级容器（完美三等分）的实现

实现CSS等比例分割父级容器（完美三等分）需要遵循以下步骤：

1. 设置父级容器设置为相对定位

.parent {
  position: relative;
}

1. 将子元素设置为绝对定位，在其中添加伪元素来撑开三等分的空间

.parent > .child {
  position: absolute;
  width: 33.33%;
}

.parent > .child::before {
  content: "";
  display: block;
  padding-top: 100%; /* 设置为高度的百分比 */
}

1. 使用Flexbox布局来使子元素等比例排列

.parent {
  display: flex;
  flex-wrap: wrap;
}

.parent > .child {
  flex: 1;
}

接下来，我们使用两个示例来演示实现CSS等比例分割父级容器的方法。

示例一

HTML代码：

<div class="parent">
  <div class="child">内容 1</div>
  <div class="child">内容 2</div>
  <div class="child">内容 3</div>
</div>

CSS代码：

.parent {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

.parent > .child {
  position: absolute;
  width: 33.33%;
  height: 100%;
  flex: 1;
  outline: 1px solid red;
}

.parent > .child::before {
  content: "";
  display: block;
  padding-top: 100%;
}

在该示例中，我们将父级容器设置为相对定位，并将子元素设置为绝对定位，并让它们的宽度为父级容器的1/3。接着，为每个子元素添加伪元素，并将其设置为block元素，使其具有宽度和高度，并且撑满整个父级容器。

最后，使用flexbox布局来强制子元素按照等比例分配空间。

示例二

HTML代码：

<div class="parent">
  <div class="child">内容 1</div>
  <div class="child">内容 2</div>
  <div class="child">内容 3</div>
  <div class="child">内容 4</div>
  <div class="child">内容 5</div>
  <div class="child">内容 6</div>
</div>

CSS代码：

.parent {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

.parent > .child {
  position: absolute;
  width: 33.33%;
  height: 100%;
  flex: 1;
  outline: 1px solid red;
}

.parent > .child:nth-child(odd) {
  top: 0;
}

.parent > .child:nth-child(even) {
  bottom: 0;
}

.parent > .child:nth-child(1),
.parent > .child:nth-child(4) {
  left: 0;
}

.parent > .child:nth-child(2),
.parent > .child:nth-child(5) {
  left: 33.33%;
}

.parent > .child:nth-child(3),
.parent > .child:nth-child(6) {
  right: 0;
}

.parent > .child::before {
  content: "";
  display: block;
  padding-top: 100%;
}

在该示例中，我们还使用了nth-child()选择器来为子元素设置不同的位置。具体来说，我们将第1、2、3个子元素设置为顶部位置，并将第4、5、6个子元素设置为底部位置。此外，我们将第1、4个子元素设置为左侧位置，将第2、5个子元素设置为中间位置，将第3、6个子元素设置为右侧位置。

最后，我们使用flexbox布局来强制子元素按照等比例分配空间，设置子元素的宽度为父级容器的1/3。