Как я могу поместить эти 4 изображения в 1 изображение?

Question

Я застрял на данный момент, чтобы поместить эти 4 изображения (в одном ряду) внутри div с изображением.

HTML:

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

CSS:

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

Я уже пытался использовать z-index, но ничего не произошло. Буду признателен за любую помощь, пожалуйста, помогите мне ...

Answer 1

Используйте этот код Flexbox CSS

<div class="flex-container">
<div>
<img src="https://placehold.it/350x150" />
</div>
<div>
<img src="https://placehold.it/350x150" />
</div>
<div>
<img src="https://placehold.it/350x150" />
</div>
<div>
<img src="https://placehold.it/350x150" />
</div>
</div>


    .flex-container{
    display:flex;
    }
   .flex-container div {
     flex:1;
    margin:5px; 
   }
  img {
   width:100%;
   }

Answer 2

Вот так:

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;
}

Другими словами, вы хотите position: absolute для iniciRo img, position: relative для .row и использование flexbox для .row. Вот JS Fiddle.