Html 位置：固定时，如何显示4个相邻的div元素？

所以我试着把4个盒子固定在页面的中间底部。 但当我应用

位置时：固定

.g{
高度：70像素；
宽度：70px；
背景色：黑色；
保证金：5px；
位置：固定；
底部：15%；
}
否则，您可以使用flex：


.g{
高度：70像素；
宽度：70px；
背景色：黑色；
保证金：5px；
}
.团体{
显示器：flex；
证明内容：之间的空间；
宽度：400px
}
使外部div
固定
然后内部4 div元素将彼此相邻显示


.groups{
显示器：flex；
显示：-webkit flex；
位置：固定；
保证金：0自动；
左：0；
右：0；
证明内容：周围的空间；
最大宽度：500px；
}
g{
高度：70像素；
宽度：70px；
背景色：黑色；
保证金：5px；
}

试试这把小提琴


只需添加
float:left到css类.g
当然，您必须删除
位置：固定
您也可以使用
位置：固定但必须为每个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;
}


g{
高度：70像素；
宽度：70px；
背景色：黑色；
保证金：5px；
浮动：左；/*添加此*/
边框：1px纯红；
底部：15%；
}
h{
高度：70像素；
宽度：70px；
背景颜色：蓝色；
保证金：5px；
位置：固定；
}
.h1{
底部：50px；
右：20px；
}
.h2{
底部：50px；
右：100px；
}
.h3{
底部：50px；
右：180px；
}
.h4{
底部：50px；
右：260px；
}

这是一个工作
由于位置固定，您可能需要指定g1、g2和g3类的位置，如下所示

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

将容器改为固定您的不起作用，因为“15%”仅在父容器设置了高度时才起作用。。但是，是的，你得到的答案提供了一个合适的解决方案。@MareGraphics-MaRe:Fiddle链接现在起作用了。对不起，我不知道是怎么回事。我提供了一个无效的。@MareGraphics MaRe:你对我的回答不满意吗？你看过小提琴了吗？
.g1{
    left: 0px;
}
.g2{
    left: 100px;
}
.g3{
    left: 200px;
}