CSS e altezze

**pegaso22** · 06-11-2014, 13:10

Ciao a tutti,
non riesco ad impostare l'altezza uguale tra tutti gli elementi "article"

Questo il codice

codice:

    <section>
        <article id="01">
            <a href="#1"><img src="visita1.jpg"></a>
            <div class="description">
                prova1
            </div>    
        </article>
        <article id="02">
            <a href="#2"><img src="visita2.jpg"></a>
            <div class="description">
                prova1<br>Prova2
            </div>            
        </article>
        <article id="03">
            <a href="#3"><img src="visita3.jpg"></a>
            <div class="description">
                prova1
            </div>            
        </article>
    </section>

CSS

codice:

section {
    max-width: 100%;
    overflow: hidden;
    position: relative;
    margin: 0;
    padding: 0px;
}


section article {
    vertical-align: top;
    overflow: hidden;
    float:left;
    text-align: left;
    display: inline-block;
    width: 100%;
    margin: 0px;
    padding: 0px;
    border: 0px;
    background-color: #0044ff;
}


section img {
    vertical-align: top;
    float:left;
    align: center;
    width: 100%;
    height: auto;
    margin: 0px;
    padding: 0px;
    border: 0px;
}
section img:hover {
    opacity:0.8;
}


section article .description {
    float: left;
    width: 100%;
    height: 100%;
}

Ora come ora l'altezza dei vari article è differente.
Praticamente quello centrale, che ha 2 righe di testo, è più alto rispetto agli altri 2.
Come posso far si che tutti abbiano la stessa altezza? Non ovviamente fissa ma in base al contenuto presente in description.

Fatemi sapere.

Grazie mille.

**pegaso22** · 06-11-2014, 13:22

Ecco il problema:
http://win.italiaguideturistiche.it/...nco_visite.asp

Si vede stringendo e facendo si che sulla prima riga ci siano 4 o 3 immagini.
Praticamente la seconda riga perde la posizione corretta.

Date un occhiata.

**pegaso22** · 06-11-2014, 16:58

Qualcuno ha già affrontato questo problema?
Credo sia molto comune.. non riesco però a trovare la soluzione corretta!!

**tampertools** · 06-11-2014, 17:13

puoi provare con javascript:

codice:

var articles = document.getElementsByTagName("article");
window.addEventListener("resize", function () {
    var i = articles.length, maxHeight = 0;
    while (--i) {
        maxHeight = Math.max(maxHeight, articles[i].offsetHeight);
    }
    i = articles.length;
    while (--i) {
        articles[i].style.height = maxHeight;
    }
});

**pegaso22** · 06-11-2014, 17:28

tutto con i CSS non fa?

**pegaso22** · 06-11-2014, 17:31

Ho provato il codice JS ma non cambia nulla

**tampertools** · 06-11-2014, 18:18

Ho coretto il codice:
http://jsfiddle.net/4e42fjfu/embedde...t,html,css,js/

**pegaso22** · 06-11-2014, 19:36

Ora pare vada bene.
Non mi crea problemi con vari dispositivi o browser?

Unico problema è che quando stringo la finestra se il testo aumenta di una riga non viene modificata l'altezza e quindi si vede male.

**pegaso22** · 06-11-2014, 19:53

Ho provato con:

<body onResize="listener();">

Ma non va...

**pegaso22** · 06-11-2014, 19:55

Il problema nasce sopratutto nello smartphone o nei tablet.. se lo metti in orizzontale o in verticale dovrebbe modificare quell'altezza perchè i testi si dispongono in un numero di righe differente.

Discussione: CSS e altezze

Strumenti discussione

Ricerca discussione

Visualizza

CSS e altezze

Permessi di invio