html - 如何在位置 : fixed? 时并排显示 4 个 div 元素

Question

所以我试图将 4 个框固定在页面的底部中间。但是当我对它们应用 position: Fixed; 时，它们就变成了一个堆叠的盒子。

.g{
  height: 70px;
  width: 70px;
  background-color: black;
  margin: 5px;
  position: fixed;
  bottom: 15%;
}

<div class="groups">
  <div class="g g1"></div>
  <div class="g g2"></div>
  <div class="g g3"></div>
  <div class="g g4"></div>
</div>

我想要的是:

Answer 1

使外部 div 固定 然后内部 4 div 元素将彼此相邻显示。

      .groups {
    display: flex;
    display: -webkit-flex;
    position: fixed;
    margin: 0 auto;
    left: 0;
    right: 0;
    justify-content: space-around;
    max-width: 500px;
}
      .g{
        height: 70px;
    width: 70px;
    background-color: black;
    margin: 5px;
      }

      <div class="groups">
          <div class="g g1"></div>
          <div class="g g2"></div>
          <div class="g g3"></div>
          <div class="g g4"></div>
        </div>