Éléments en float versus hauteur variables.

Bonjour,

J'ai fait un exemple plutôt simple qui facilite la compréhension du problème. J'ai des clips ayant des titres de longueur variables et par conséquent la hauteur de mes clips peut varier. Puisque la hauteur peut varier, je ne veux pas mettre de hauteur fixe pour régler mon problème "visuel".

De plus, selon la taille de la page, il peut y avoir plus ou moins de clip par "ligne". J'ai mis une largeur de 320 pixel au body pour démontrer ça. Si on change cette valeur, ça s'adaptera.

Bref, il y a-t-il un moyen de normaliser la hauteur de mes <li> pour qu'ils soient tous de la même hauteur sans y mettre une hauteur fixe ( hardcodé ).

Merci

Autres alternatives, commentaires sur d'autres aspects sont aussi le bienvenue

    <div id="content">
    	<h1>Movies - Latest Updates</h1>
        <ul class="clips">
            <li>
                <a href="#"><img src="http://www.romainthievin.com/stage-lamborghini/lamborghini-gallardo-lp-560-4.jpg" alt="" /></a>
                <div>
                    <a href="#">Voiture trop hot yaya yé yo yépiki</a>
                    <p><strong>Release</strong> : 2009-08-23</p>
                    <p><strong>Length</strong> : 15:38 min</p>
                    <p><strong>Views</strong> : 234423</p>
                    
                </div>
            </li>
            <li>
                <a href="#"><img src="http://www.romainthievin.com/stage-lamborghini/lamborghini-gallardo-lp-560-4.jpg" alt="" /></a>
                <div>
                    <a href="#">Voiture trop hot</a>
                    <p><strong>Release</strong> : 2009-08-23</p>
                    <p><strong>Length</strong> : 15:38 min</p>
                    <p><strong>Views</strong> : 234423</p>
                    
                </div>
            </li>
            <li>
                <a href="#"><img src="http://www.romainthievin.com/stage-lamborghini/lamborghini-gallardo-lp-560-4.jpg" alt="" /></a>
                <div>
                    <a href="#">Voiture trop</a>
                    <p><strong>Release</strong> : 2009-08-23</p>
                    <p><strong>Length</strong> : 15:38 min</p>
                    <p><strong>Views</strong> : 234423</p>
                    
                </div>
            </li>
            <li>
                <a href="#"><img src="http://www.romainthievin.com/stage-lamborghini/lamborghini-gallardo-lp-560-4.jpg" alt="" /></a>
                <div>
                    <a href="#">Voiture trop</a>
                    <p><strong>Release</strong> : 2009-08-23</p>
                    <p><strong>Length</strong> : 15:38 min</p>
                    <p><strong>Views</strong> : 234423</p>
                    
                </div>
            </li>
            <li>
                <a href="#"><img src="http://www.romainthievin.com/stage-lamborghini/lamborghini-gallardo-lp-560-4.jpg" alt="" /></a>
                <div>
                    <a href="#">Voiture trop hot yaya yé yo yépiki</a>
                    <p><strong>Release</strong> : 2009-08-23</p>
                    <p><strong>Length</strong> : 15:38 min</p>
                    <p><strong>Views</strong> : 234423</p>
                    
                </div>
            </li>
            <li>
                <a href="#"><img src="http://www.romainthievin.com/stage-lamborghini/lamborghini-gallardo-lp-560-4.jpg" alt="" /></a>
                <div>
                    <a href="#">Voiture trop hot yaya yé yo yépiki asd asd asd asd </a>
                    <p><strong>Release</strong> : 2009-08-23</p>
                    <p><strong>Length</strong> : 15:38 min</p>
                    <p><strong>Views</strong> : 234423</p>
                    
                </div>
            </li>
            <li>
                <a href="#"><img src="http://www.romainthievin.com/stage-lamborghini/lamborghini-gallardo-lp-560-4.jpg" alt="" /></a>
                <div>
                    <a href="#">Voiture trop hot yaya yé yo yépiki</a>
                    <p><strong>Release</strong> : 2009-08-23</p>
                    <p><strong>Length</strong> : 15:38 min</p>
                    <p><strong>Views</strong> : 234423</p>
                    
                </div>
            </li>
        </ul>
    </div>

* { margin:0; padding:0; }
dd, dt, li, dl, ol, ul{ list-style:none; }

body{ font-family:Arial; font-size:0.7em; width:320px; }
a { text-decoration:none; }
a img { border:none; }

#content { float:left; clear:both; padding:2px; }

#content h1 { font-size:1.1em; text-transform:uppercase; }

.clips li { float:left; width:140px; margin:1%; overflow:hidden; border:1px solid blue; }
.clips li > a { display:block; position:relative; }
.clips li > a span { display:block; width:64px; height:80px; position:absolute; top:50%; left:50%; margin:-40px 0 0 -32px; z-index:22; }
.clips li > a span strong { display:none; }
.clips li > a img { width:100%; height:auto; }
.clips li div { padding:2px; }
.clips li h2 { font-size:1.1em; font-weight:bold; }

Modifié par Sorano (12 Feb 2010 - 15:00)