基于父母大小的相同高度兄弟姐妹

Question

当视图发生变化（手机、平板、桌面等）时，如何根据父级的高度和宽度将一个div拆分成高度和宽度相同的子级？

类似于this question，但我希望除了使用表格之外，还有其他解决方案（使用引导卡或材料设计）。

例如

• 2 个主要列：A 和 B，每个是屏幕宽度的一半。他们是父母。每个父母有 10 个孩子，
• 父母身高：500px -> 10个孩子，身高：50px
• 父母身高：1000px -> 10个孩子，身高：100px

Answer 1

您可以使用display: flex

基本上，这允许您告诉子元素它可以占用多少高度/宽度。

在下面的 sn-p 中，我们有 3 个孩子。我们可以为每个孩子分配一个flex。

每个孩子的 flex 意味着该特定孩子应该占用其父母的多少。在我的示例中，它们都有一个 flex 为 1，这意味着它们每个都占据父级高度的 1/3。

孩子 1 - 1

孩子 2 - 1

孩子 3 - 1

但是，如果我们有这样的事情：

孩子 1 - 1

孩子 2 - 2

儿童 3 - 3

然后我们有一些不同的东西。在这种情况下，Child1 占据父母身高的 1/6，Child2 占据父母身高的 2/6（1/3），Child3 占据父母身高的 3/6（1/2） .这基本上就是flex 的工作原理。

最后，flex 有一个默认方向，这意味着它会根据 flex 值自动填充宽度（行），而不是高度（列）。因此，要告诉 flex 在列中显示，您需要使用 flex-direction: column; 按高度排序/“挤压”。

.parent {
  width: 200px;
  height: 180px;
  display: flex;
  flex-direction: column;
}

.child1 {
  background: red;
  width: 100%;
  flex: 1; /* says to take up 1/3 of the parents height (so 60px) */
}

.child2 {
  background: green;
  width: 100%;
  flex: 1; /* says to take up 1/3 of the parents height (so 60px) */
}

.child3 {
  background: blue;
  width: 100%;
  flex: 1; /* says to take up 1/3 of the parents height (so 60px) */
}

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

Answer 2

CSS：

.parent{
       height: 500px;
       width: 100%
        }
.parent div{
       height:height: 50px;
       width: auto;
        }

HTML：

`<div class="parent">
     <div></div>/*child*/
     <div></div>/*child*/
     <div></div>/*child*/
     <div></div>/*child*/
     <div></div>/*child*/
     <div></div>/*child*/
     <div></div>/*child*/
     <div></div>/*child*/
     <div></div>/*child*/
     <div></div>/*child*/
 <div>
`

Answer 3

在容器上设置显式高度 (100vh) 并使用 Flexbox 布局创建具有等高行的列：

body {
  margin: 0;
}
#wrapper {
  display: flex;
  flex-direction: row;
}
.col {
  width: 50%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.col > div {
  flex: 1;
}
.col > div:nth-child(odd) {
  background-color: gray;
}

<div id="wrapper">
  <div class="col">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
  </div>
  <div class="col">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>

  </div>

</div>