有三个子元素时排在同一行,有四个子元素时排成两行,一行两个子元素

这个可以使用 CSS 的 flexbox 布局来实现。

首先，将包含子元素的容器设置为 `display: flex`，这样子元素就会按照一行排列。然后使用 `flex-wrap: wrap` 属性来控制当子元素数量超过容器宽度时，是否自动换行。

接下来使用 `flex-basis` 属性来设置每个子元素的基础宽度，例如设置为 `25%`，则当容器中有四个子元素时，每个子元素的宽度就会自动调整为 `25%`，排成两行，一行两个子元素。

完整的 CSS 代码如下：

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

.container > * {
  flex-basis: 25%; /* 每个子元素的基础宽度为 25% */
  box-sizing: border-box; /* 让 padding 和 border 不影响宽度 */
}

需要注意的是，以上代码只是一个基础实现，具体样式还需要根据实际需求进行调整。