左列内 Each-Other 顶部的三个 Div - 无 Bootstrap - HTML / CSS

Question

我无法尝试在 left-column div 内将三个 div 堆叠在 each-other 之上。这是我想要实现的目标：

我正在尝试使用在 this question 中找到的解决方案，所以我有这个：

.main-div {
  border: 1px solid black;
}

.main-div-line-1 {
    border-bottom: 1px solid rgba(0,0,0,.125);
    padding: 5px;
    font-family: "Proxima Nova Bold";
    font-size: 20px;
    text-align: center;
}

.main-div-line-2 {
    display: flex;
}

/*parent*/
.inner-main-left {
    display: flex;
    position: relative;
}
/*child*/
.inner-left-left-top {
    position: absolute;
}
/*child*/
.inner-left-left-middle {
    position: absolute;
}
/*child*/
.inner-left-left-bottom {
    position: absolute;
}

.inner-main-right {
    display: flex;
}

#main-kitty-image {
    width: 360px;
}

<div class="main-div">
  <div class="main-div-line-1">
    Kitty Averages
  </div>
  <div class="main-div-line-2">
    <div class="inner-main-left">
      <div class="inner-left-left-top">
        helloKitty Top
      </div>
      <div class="inner-left-left-middle">
        helloKitty Middle
      </div>
      <div class="inner-left-left-bottom">
        helloKitty Bottom
      </div>
    </div>
    <div class="inner-main-right">
      <img id="main-kitty-image" src="https://i.imgur.com/JmY6X13.jpg"/>
    </div>
  </div>
</div>

是不是有 parent div 的想法，在这种情况下，inner-main-left 作为 position: relative，然后是内部的 div， inner-left-left-top、inner-left-left-middle 和 inner-left-left-bottom，每个都是 position: absolute？

.inner-main-left 和 .inner-main-right 都是 .main-div-line-2 的 children。我们希望这两个并排显示，这就是为什么我将它们都显示为 flex。但这不应该改变他们在 top-of each-other 上堆叠 div 的能力，对吧？

如果您运行上面的代码片段或访问 this JSFiddle，您会发现这不起作用。

Answer 1

正如@Paulie_D链接的文章中指出的，关键是将flex-direction: column添加到您想要充当parent的div柱子。

然后对于 div 中的 children，您可以像这样设置 flex-grow、flex-shrink 和 flex-basis：

    .inner-left-left-top {
       flex: 0 0 100px;
    }

    .inner-left-left-middle {
        flex: 0 0 100px;
    }

    .inner-left-left-bottom {
        flex: 0 0 100px;
    }

工作JSFiddle and see MDN Flex

Answer 2

我已经根据您想要的布局配置了 flex。您可以参考 w3schools tutorial 了解更多信息。

.main-div {
  border: 1px solid black;
}

.main-div-line-1 {
    border-bottom: 1px solid rgba(0,0,0,.125);
    padding: 5px;
    font-family: "Proxima Nova Bold";
    font-size: 20px;
    text-align: center;
}

.main-div-line-2 {
    display: flex;
}

/*parent*/
.inner-main-left {
    display: flex;
    position: relative;
    flex: 1 0 50%;
    flex-direction: column;
}
/*child*/
.inner-left-left-top {
    flex: 1 0 33.33%;
}
/*child*/
.inner-left-left-middle {
    flex: 1 0 33.33%;
}
/*child*/
.inner-left-left-bottom {
    flex: 1 0 33.33%;
}

.inner-main-right {
    display: flex;
    flex: 1 0 50%;
}

#main-kitty-image {
    width: 360px;
}

<div class="main-div">
  <div class="main-div-line-1">
    Kitty Averages
  </div>
  <div class="main-div-line-2">
    <div class="inner-main-left">
      <div class="inner-left-left-top">
        helloKitty Top
      </div>
      <div class="inner-left-left-middle">
        helloKitty Middle
      </div>
      <div class="inner-left-left-bottom">
        helloKitty Bottom
      </div>
    </div>
    <div class="inner-main-right">
      <img id="main-kitty-image" src="https://i.imgur.com/JmY6X13.jpg"/>
    </div>
  </div>
</div>

左列内 Each-Other 顶部的三个 Div - 无 Bootstrap - HTML / CSS

Three Divs on Top of Each-Other Within Left Column - No Bootstrap - HTML / CSS

html

css

position

css-position

multiple-columns