三个Divs在左栏内互相顶着--没有Bootstrap - HTML CSS

Question

我在尝试将三个div叠加在一个左栏div中时遇到了麻烦。以下是我想达到的目的。

我试图使用以下的解决方案 这个问题，所以我有这个。

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

在这种情况下，是不是应该让父母离婚？inner-main-left 作为 position: relative 然后是内部的divs。inner-left-left-top, inner-left-left-middle 和 inner-left-left-bottom，各为 position: absolute?

.inner-main-left 和 .inner-main-right 同为 .main-div-line-2. 我们希望这两个并列，这就是为什么我把它们都显示为 flex. 但是，这不应该改变他们在div中互相堆叠div的能力，对吗？

如果你运行上面的代码段或访问 这个JSFiddle你会发现这样做是行不通的。

Answer 1

我已经根据你所需要的布局配置了flex。你可以参考w3schools 教程 获取更多信息。

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

Answer 2

正如 @Paulie_D 链接的文章中所指出的，关键是要添加上 flex-direction: column 到你想作为父列的div中。

然后，对于该 div 中的子列，您可以为其设置 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 且看 MDN Flex