使用CSS

Question

在Flex容器内查找特定的堆叠顺序。非常基本的页脚分为3个部分，因此左右分区的高度为100％，宽度为20％。中间会弯曲填补差异，但中间需要分成两半。因此顶部和底部Div各自高度为50％。我似乎无法找出绝对，固定等位置。或浮动任何最好的。 谢谢

好的抱歉，这是CSS内部的灵活容器

.footer_left_box {
    position: absolute;
    display: inline-block;
    float:left;
    left:0;
    width: 10%;
    height: 100%;
    background-color:#C9D329;
}
.footer_middle_top_box {
    position: relative;
    display: inline-block;
    width: 80%;
    height: 50%;
    background-color:#2BB851;
}
.footer_middle_bottom_box {
    position: relative;
    display: inline-block;
    width: 80%;
    height: 50%;
    background-color:#3954D4;
}
.footer_right_box {
    position: absolute;
    right:0;
    width: 10%;
    height: 100%;
    background-color:#E33538;
}

这是我需要的一个例子

Answer 1

Flexbox可以做到这一点，但您可能需要调整结构。

＆＃13;

＆＃13;

footer {
  height: 150px;
  display: flex;
}
.left,
.right {
  flex: 0 0 20%;
}
.left {
  background: rebeccapurple;
}
.right {
  background: #bada55;
}
.middle {
  flex: 1;
  border: 2px solid red;
  display: flex;
  flex-direction: column;
}
.top {
  flex: 0 0 50%;
  background: #c0c0ae;
}
.bottom {
  flex: 0 0 50%;
  background: #c0ffee;
}

＆＃13;

<footer>
  <div class="left"></div>
  <div class="middle">
    <div class="top"></div>
    <div class="bottom"></div>
  </div>
  <div class="right"></div>
</footer>

＆＃13;

＆＃13;

＆＃13;