如何在位置：固定的情况下彼此相邻显示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 fixed，然后内部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>

Answer 2

否则，您可以使用flex：

.g{
  height: 70px;
  width: 70px;
  background-color: black;
  margin: 5px;
}
.groups {
  display: flex;
  justify-content: space-between;
  width: 400px
}

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

尝试这个小提琴

Fiddle here

.groups{
 position: fixed;
 bottom: 15%;
 display:flex;
 justify-content:center;
 width:100%;
 }
.g{
 height: 70px;
 width: 70px;
 background-color: black;
 margin: 5px;
 }

Answer 4

只需将float:left;添加到css类.g中 当然，您必须删除position: fixed; 您也可以使用position: fixed;，但必须为每个div的位置提供不同的值。

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

<div class="groups">
  <div class="h h1"></div>
  <div class="h h2"></div>
  <div class="h h3"></div>
  <div class="h h4"></div>
</div>

.g {
  height: 70px;
  width: 70px;
  background-color: black;
  margin: 5px;
  float:left; /* add this */
  border: 1px solid red;  
  bottom: 15%; 
}

.h {
  height: 70px;
  width: 70px;
  background-color: blue;
  margin: 5px;
  position:fixed;
}

.h1 {
  bottom: 50px;
  right: 20px;
}

.h2 {
  bottom: 50px;
  right: 100px;
}

.h3 {
  bottom: 50px;
  right: 180px;
}

.h4 {
  bottom: 50px;
  right: 260px;
}

这是工作中的Fiddle

Answer 5

由于位置是固定的，因此您可能需要像下面这样区分类别g1，g2和g3的位置。

.g1{
    left: 0px;
}
.g2{
    left: 100px;
}
.g3{
    left: 200px;
}