根据父母的体型，相同身高的兄弟姐妹

Question

当视图发生变化(手机、平板电脑、台式机等(时，如何根据父级的高度和宽度将div 拆分为具有相同高度和宽度的子级？

这与这个问题类似，但我希望除了使用表格之外还有其他解决方案(使用引导卡或材料设计(。

例如

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

Answer 1

您可以使用display: flex

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

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

每个孩子的弹性意味着该特定子项应该占用多少其父项。在我的例子中，它们都有一个1的弯曲，这意味着它们各自占据了父母身高的 1/3。

儿童1 - 1

儿童2 - 1

儿童3 - 1

但是，如果我们有这样的东西：

儿童1 - 1

儿童2 - 2

儿童3 - 3

然后我们有一些不同的东西。在这种情况下，孩子 1 占用父母身高的 1/6，孩子 2 占用父母身高的 2/6 (1/3(，孩子 3 占用父母身高的 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

在容器上设置显式高度 (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>

Answer 3

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>
`