How to align the display of images respecting the individual height of each one?

Question

How to align the display of images respecting the individual height of each one?

Navigation

#1 by (0 votes)

2

The display of my images is erratic. See below:

Ineedittoappearinalignment.IdidanassemblybelowtoillustratehowIwouldlikethemtobedisplayed,asIknowoneimagewillhaveheightgreaterthantheother.

CSS:

figure.mais_detalhes_guia_comercial_fotos{width:100%;max-width:1200px;margin-top:10px;box-sizing:border-box;}figure.mais_detalhes_guia_comercial_fotosimg{float:left;width:45%;margin:2px;box-sizing:border-box;border:1px#FF8922solid;}

HTML

<figureclass="mais_detalhes_guia_comercial_fotos">
    <img src="./adm-gc/fotos/<?php echo $gc_detalhes_fotos['foto']; ?>" alt="Guia Comercial - Guarapari">
</figure>

css

asked by anonymous 25.07.2017 / 17:12

1 answer

Slow reporting Insert elements into vector of C ++ lists

score 0 · Answer 1

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