Question

我在两个子容器中有一个父容器，在那里每个子容器中的每个子容器都有固定的高度和宽度，我有一个加载器loader gif。

.parent-container{
    display: flex;
    justify-content: space-evenly;
    border: 7px solid black
}

.sub-container-one{
 width:400px;
 height: 300px;
 border: 3px solid blue;
}

.sub-container-two{
  width: 300px;
  height: 300px;
  border: 3px solid red;
}

.loader{
    display: block;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    position: absolute;
    background-image: url('http://loadinggif.com/images/image-selection/3.gif');
    background-repeat: no-repeat;
    background-position: center;
}

.second-loader{
  margin-left:50%;
}

<div class="parent-container">
  <div class="sub-container-one">
   <div class="loader"></div>
  </div>
  <div class="sub-container-two">
    <div class="loader second-loader"></div>
  </div>
</div>

如何在中心的两个sub div中显示相同的加载器，我又添加了一个类，现在加载器未显示在中心。

我给了

justify-content: center

它可以工作，但是如何将加载器对准两个div的中心

justify-content: space-evenly;

对于IE也可以吗？

Answer 1

有效。如下所示为装载机制作CSS，移开位置并将宽度设为100％

.loader{
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('http://loadinggif.com/images/image-selection/3.gif');
    background-repeat: no-repeat;
    background-position: center;
}

合理地证明内容空间均匀，不将细分显示在中心

1 个答案: