Question

当视图更改（电话，平板电脑，台式机等）时，如何根据父级的高度和宽度将div分为相同高度和宽度的子项？

它与this question类似，但我希望除了桌子以外，还有其他解决方案（使用引导卡或材料设计）。

例如

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

Answer 1

您可以使用display: flex

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

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

每个孩子的弹性表示该特定孩子应该承担多少父母。在我的示例中，它们都具有1 的 flex。这意味着它们各自占据了父母身高的1/3。

儿童1-1-

Child2-1

Child3-1

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

儿童1-1-

Child2-2

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

在容器上设置一个明确的高度（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>
`

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

3 个答案: