如何在位置：固定的情况下彼此相邻显示4个div元素？

Question

So I'm trying to make 4 boxes fixed in the bottom middle of the page. But When I apply position: Fixed; to them, they just become one stacked box.

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

What I want is this:

Answer 1

Make outer div fixed then inner 4 div element will show next to each other.

  .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

Otherwise you can do it with 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

Try this fiddle

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

Just add float:left; to the css class .g Of course you MUST remove position: fixed; You can also use position: fixed; but you must provide different values for position for each 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;
}

Here is a working Fiddle

Answer 5

As position is fixed, you may need to sepcify the positions of class g1, g2 and g3 like below.

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