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>

Answer 2

您可以使用CSS GRID在二维中布局元素。

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

from kivy.app import App
from kivy.clock import Clock
from kivy.lang import Builder
from kivy.properties import StringProperty, partial
from kivy.uix.button import Button
from kivy.uix.gridlayout import GridLayout
from kivy.uix.label import Label
from kivy.uix.modalview import ModalView
from kivy.uix.screenmanager import Screen
from kivy.uix.screenmanager import ScreenManager
from kivy.uix.scrollview import ScrollView
from kivy.uix.stacklayout import StackLayout

Answer 3

.parent{
height: 200px;
    width: 100%;
}
.parent > *{
    height: 33.33%;
    width: 50%;
    float: left;
    box-sizing: border-box;
    text-align: center;
    border: 1px solid;
    display:flex;
    align-items:center;
    justify-content:center;
}
.child1{
height:100%;
}

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

希望有帮助

Answer 4

一种简单的方法是使用display: flex。您可以根据父元素的高度定义要在列中设置的元素流。如您所截取的.parent所示，视口的整个高度（100vh）具有定义的高度。当列已满（达到父级的高度）时，将创建一个新列。

body
{
  margin: 0;
}
.parent
{
  display: flex;
  flex-flow: column wrap;
  height: 100vh;
}
.parent > div:first-of-type
{
  height: inherit;
  background-color: grey;
}

.parent > div
{
  flex: 1 1 auto;
  background-color: silver;
}

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

Answer 5

这是仅适用于CSS的解决方案，

    .parent {
      display: inline-grid;
      grid-template-columns: 50% 50%;
      grid-template-rows: 1fr 1fr 1fr;
    }
    
    .child1 {
      grid-column:1;
      grid-row:1/4;
    }
    
    .child1, .child2, .child3, .child4 {
      border: 1px solid red;
      padding: 20px;
    }

CSS：将兄弟元素定位在2列3行中

5 个答案: