Question

我有大约一周的CSS / HTML经验，现在已经被困在这个问题上大约半个小时了。我真的不知道如何调整此代码段以使其在不同的浏览器上成功运行。它在Chrome上工作正常，将图片排成四行，均匀分布，但对Safari不起作用。我还没有测试它是否适用于Firefox。如果有人可以告诉我如何调整这些代码，我将非常感激。

#containermain {
  display: flex;
  justify-content: space-between;
}
#containermain div {
  width: 250px;
  height: auto;
  background: rgb(255, 255, 255, 0);
}
#containermaintext div {
  width: 250px;
  height: auto;
  background: rgb(255, 255, 255, 0);
}
#containermain div:first-child {
  border-left: 0;
}
#containermain div:last-child {
  border-right: 0;
}

<div id="containermain" class="slideExpandUp">
  <div>
    <a href="physics.html">
      <img src="images/atom.png" style="width: 100%;">
    </a>
  </div>

  <div>
    <a href="math.html">
      <img src="images/mathematics.png" style="width: 100%;">
    </a>
  </div>

  <div>
    <a href="humanities.html">
      <img src="images/books.png" style="width: 100%;">
    </a>
  </div>

  <div>
    <a href="stem.html">
      <img src="images/stem.png" style="width: 100%;">
    </a>
  </div>
</div>

Answer 1

我在PC上并没有进行Safari检查，但我建议在内部div中添加内嵌块，如下所示：

        #containermain div {
             /*width: 250px;*/
             width: 20%;
             display:inline-block;
             height: auto;
             background: rgb(255,255,255,0);
         }

我也改变了宽度，使其能够相应地缩放，而不是分成另一行。

使CSS代码段与多个浏览器兼容？

1 个答案: