html - CSS:在 2 列和 3 行中定位兄弟元素

Question

我正在尝试定位 4 个同级元素，以便第一个占据父元素宽度的一半，而其他 3 个将占据其余部分，并位于彼此下方。 简单的解决方法是将最后 3 个包装在父元素中，但遗憾的是这是不可能的，因为这是针对我无法更改 HTML 的 Web 应用程序

我已经尝试了所有我知道的定位技巧，但似乎没有任何效果。

<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
    <div class="child4"></div>
</div>

我希望元素像这样定位:

|--------|--------|
| | 2 |
| |--------|
| 1 | 3 |
| |--------|
| | 4 |
|--------|--------|

有关定位的示例，请参见代码。

Answer 1

你可以试试 CSS 网格:

.parent {
  display:inline-grid;
  grid-template-columns:auto auto;
  grid-template-rows:1fr 1fr 1fr;
}
.parent > div {
  outline:1px solid #000;
  padding:20px;
}
.child1 {
  grid-column:1;
  grid-row:1/4;
}

<div class="parent">
    <div class="child1">1</div>
    <div class="child2">2</div>
    <div class="child3">3</div>
    <div class="child4">4</div>
</div>