如何将一组相对定位的分区置于另一个相对定位的分区内？

Question

我试图将一组相对定位的div动态地置于父div中，该div也是相对定位的。

父div为620px宽，子div为200px宽。每行可以有1到3个子div，因此我的意思是尝试动态地将父div中的子div组。例如，如果只有一个子div，那个子div应该在父div中居，或者如果只有2个子div，那些子div应该在父div中居。

我会使用内联块作为子div，但是在子div中，还有div对于子div是绝对定位的，因此inline-block不适用于绝对定位。

这是我的css，或者你可以在这里看到一个有效的例子：https://jsfiddle.net/y3ghpkvs/

.parentClass {
    position: relative;
    width: 620px;
    height: 500px;
    background-color: gray;
}

.childClass {
    position: relative;
    width: 200px;
    height: 400px;
    float: left;
    margin-left: 5px;
    background-color: white;
}

.insideChildDiv1 {
    position: absolute;
    width: 100%;
    height: 95px;
    top: 0;
    left: 0;
    background-color: black;
    color: white;
    text-align: center;
    line-height: 100px;
}

.insideChildDiv2 {
    position: absolute;
    width: 100%;
    height: 200px;
    top: 100px;
    left: 0;
    background-color: green;
}

.insideChildDiv3 {
    position: absolute;
    width: 100%;
    height: 95px;
    bottom: 0;
    left: 0;
    color: white;
    text-align: center;
    line-height: 100px;
    background-color: black;
}

我似乎无法弄清楚如何将2个childClass div放在parentClass div中。有人有任何提示吗？

Answer 1

解决方案1：使用Flex

尝试使用 flex css。使用 flex ，您可以轻松地将项目垂直或水平居中对齐父项。

使用 justify-content: center; 来对齐div中心。

<强> Updated Fiddle

.parentClass {
  width: 620px;
  background-color: gray;
  display: flex;
  justify-content: center;
  margin: auto;
  flex-wrap: wrap;
}

.childClass {
  width: 200px;
  height: 400px;
  background-color: white;
  position: relative;
  margin: 3px;
}

.insideChildDiv1 {
  position: absolute;
  width: 100%;
  height: 95px;
  top: 0;
  left: 0;
  background-color: black;
  color: white;
  text-align: center;
  line-height: 100px;
}

.insideChildDiv2 {
  position: absolute;
  width: 100%;
  height: 200px;
  top: 100px;
  left: 0;
  background-color: green;
}

.insideChildDiv3 {
  position: absolute;
  width: 100%;
  height: 95px;
  bottom: 0;
  left: 0;
  color: white;
  text-align: center;
  line-height: 100px;
  background-color: black;
}

<div class="parentClass">
  <div class="childClass">
    <div class="insideChildDiv1">George</div>
    <div class="insideChildDiv2"></div>
    <div class="insideChildDiv3">CEO</div>
  </div>
  <div class="childClass">
    <div class="insideChildDiv1">John</div>
    <div class="insideChildDiv2"></div>
    <div class="insideChildDiv3">Vice President</div>
  </div>
  <div class="childClass">
    <div class="insideChildDiv1">John</div>
    <div class="insideChildDiv2"></div>
    <div class="insideChildDiv3">Vice President</div>
  </div>
  <div class="childClass">
    <div class="insideChildDiv1">John</div>
    <div class="insideChildDiv2"></div>
    <div class="insideChildDiv3">Vice President</div>
  </div>
</div>

解决方案2：使用display inline-block

.parentClass {
  width: 620px;
  background-color: gray;
  margin: auto;
  text-align: center;
}

.childClass {
  width: 200px;
  height: 400px;
  background-color: white;
  position: relative;
  margin: 4px 0;
  display: inline-block;
  margin-left: 2px;
}

.insideChildDiv1 {
  position: absolute;
  width: 100%;
  height: 95px;
  top: 0;
  left: 0;
  background-color: black;
  color: white;
  text-align: center;
  line-height: 100px;
}

.insideChildDiv2 {
  position: absolute;
  width: 100%;
  height: 200px;
  top: 100px;
  left: 0;
  background-color: green;
}

.insideChildDiv3 {
  position: absolute;
  width: 100%;
  height: 95px;
  bottom: 0;
  left: 0;
  color: white;
  text-align: center;
  line-height: 100px;
  background-color: black;
}

<div class="parentClass">
  <div class="childClass">
    <div class="insideChildDiv1">George</div>
    <div class="insideChildDiv2"></div>
    <div class="insideChildDiv3">CEO</div>
  </div>
  <div class="childClass">
    <div class="insideChildDiv1">John</div>
    <div class="insideChildDiv2"></div>
    <div class="insideChildDiv3">Vice President</div>
  </div>
  <div class="childClass">
    <div class="insideChildDiv1">John</div>
    <div class="insideChildDiv2"></div>
    <div class="insideChildDiv3">Vice President</div>
  </div>
  <div class="childClass">
    <div class="insideChildDiv1">John</div>
    <div class="insideChildDiv2"></div>
    <div class="insideChildDiv3">Vice President</div>
  </div>
  <div class="childClass">
    <div class="insideChildDiv1">John</div>
    <div class="insideChildDiv2"></div>
    <div class="insideChildDiv3">Vice President</div>
  </div>
</div>

我希望这会对你有所帮助！