html - 如何将这4张图片放入1张图片中？

我现在被困在将这4张图像（在同一行中）与div放在div内。

HTML：

.iniciRo img {
  width: 100%;
}

.iniciRo .coluna img {
  width: 270px;
  z-index: 4;
}

.iniciRo>div {
  padding: 30px 0 10px 0;
}

.iniciRo .row>div {
  padding-bottom: 20px;
}

.coluna {
  position: relative;
  padding-left: 15px;
  padding-right: 15px;
  float: left;
}

.row {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  max-width: 75em;
}

<div class="iniciRo">
  <img src="assets/images/Rodape/backbot.png">
  <div>
    <div class="row">
      <div class="coluna">
        <a href="#"><img src="assets/images/Rodape/visitas-escolas.png" /></a>
      </div>
      <div class="coluna">
        <a href="#"><img src="assets/images/Rodape/rafc.png" /></a>
      </div>
      <div class="coluna">
        <a href="#"><img src="assets/images/Rodape/rioavetv.png" /></a>
      </div>
      <div class="coluna">
        <a href="#"><img src="assets/images/Rodape/galeri.png" /></a>
      </div>
    </div>
  </div>
</div>

我已经尝试使用z-index，但是什么也没发生。
任何帮助将不胜感激，请帮助我...

最佳答案

像这样：

coluna img {
  position: relative;
  padding: 50em;
}

.iniciRo img{
  position: absolute;
    width: 100%;
}

.iniciRo > div{
    padding: 30px 0 10px 0;
}

.iniciRo .row > div{
    padding-bottom: 20px;
}

.coluna{
    position: relative;
    padding-left: 15px;
    padding-right: 15px;
  margin-bottom: 30em;

}

.row{
  position: relative;
  display: flex;
  flex-direction: column;
    width: 100%;
    max-width: 75em;
  clear: both;
}

换句话说，您要在iniciRo img中使用position: absolute，在.row中使用position: relative，对于.row使用flexbox。 Here's a JS Fiddle.

关于html - 如何将这4张图片放入1张图片中？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54384817/