In order to do this the <html>
structure has to be modified, it is necessary to create two columns, and I advise you to use <div>
for dividing columns. Follow the code:
HTML:
<!--COLUNA-1-->
<div class="coluna">
<!--EXEMPLO IMAGENS GERADAS PELO LOOP-->
<figure class="mais_detalhes_guia_comercial_fotos">
<img src="example1.png">
</figure>
<figure class="mais_detalhes_guia_comercial_fotos">
<img src="example2.png">
</figure>
<figure class="mais_detalhes_guia_comercial_fotos">
<img src="example3.png">
</figure>
</div>
<!--COLUNA-2-->
<div class="coluna">
<!--EXEMPLO IMAGENS GERADAS PELO LOOP-->
<figure class="mais_detalhes_guia_comercial_fotos ">
<img src="example4.png">
</figure>
<figure class="mais_detalhes_guia_comercial_fotos ">
<img src="example5.png">
</figure>
<figure class="mais_detalhes_guia_comercial_fotos ">
<img src="example6.png">
</figure>
</div>
In% w / w, the change I made was basically to give CSS
in the column and width: 50%
get <img>
of this width:
CSS:
.coluna{
float: left;
width: 50%;
max-width: 1200px;
margin-top: 10px;
box-sizing: border-box;
}
.mais_detalhes_guia_comercial_fotos img{
width: 100%;
box-sizing: border-box;
border: 1px #FF8922 solid;
}
/* RESET OPCIONAL NO FIGURE */
figure{
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
}
/*IMPORTANTE APENAS PARA O EXEMPLO, IGNORAR O ESTILO ABAIXO*/
.coluna:nth-child(1) .mais_detalhes_guia_comercial_fotos:nth-child(1) img{
height: 100px;
}
.coluna:nth-child(1) .mais_detalhes_guia_comercial_fotos:nth-child(2) img{
height: 200px;
}
.coluna:nth-child(1) .mais_detalhes_guia_comercial_fotos:nth-child(3) img{
height: 200px;
}
.coluna:nth-child(2) .mais_detalhes_guia_comercial_fotos:nth-child(1) img{
height: 300px;
}
.coluna:nth-child(2) .mais_detalhes_guia_comercial_fotos:nth-child(2) img{
height: 50px;
}
.coluna:nth-child(2) .mais_detalhes_guia_comercial_fotos:nth-child(3) img{
height: 150px;
}