Bonjour à tous,

Actuellement je m'amuse pas mal avec le framework CSS Bootstrap de Twitter.
Je le trouve vraiment intéressant dans le cadre d'un développement rapide d'une interface web. Et notamment gràce au découpage en colonne du corps de page, bref!

Mon seul soucis est que j'ai du mal à gérer la hauteur de mes blocs.

Voici un screen de ma page :


Image agrandie ici

Comme on peut le voir, les différents blocs du milieu n'ont pas la même hauteur... Je souhaiterais que ce soit le cas pour avoir un rendu plus propre.
L'idée serait sans doute d'agrandir chaque colonne en hauteur de façon, à l'aligner avec la plus grande ?

Voici le code HTML correspondant :

<div class="container">
<ul class="thumbnails">  
        <li class="span4">  
          <div class="thumbnail">  
            <img src="img/portfolio.png" alt="Portfolio">  
            <div class="caption">  
              <h5>Portfolio </h5> 
              <p class="text-error">Présentation de mon CV et mes réalisations.</p>               
              <p>Réalisation du site internet dynamique avec les dernières technologies web.</p>  
              <p><a href="index.php" class="btn btn-success">Découvrir le site</a></p>  
          <p class="text-info"><strong>HTML5, CSS3, JQuery, PHP5</strong> </p>
            </div>  
          </div>  
        </li>  
        <li class="span4">  
          <div class="thumbnail">  
            <img src="">  
            <div class="caption">  
              <h5>Beakiss</h5>  
              <p class="text-error">Blog voyage. Récit d'une passionnée.</p> 
              <p>   Installation, configuration et optimisation du blog. </p>         
              <p><a href="http://beakiss.com" class="btn btn-success">Découvrir le site</a></p>  
        <p class="text-info"><strong>Plateforme WordPress customisée</strong> </p>
           </div>  
          </div>  
        </li>  
    <li class="span4">  
          [ECT]
    </li>           
</ul>
</div>

Pour le CSS correspondant, il est disponible ici :
https://github.com/twitter/bootstrap/blob/master/docs/assets/css/bootstrap.css
Merci d'avance pour vos lumières..

Bonne fin de semaine à tous !

1 réponse


slt,
soit tu impose un height à tes éléments (mais sa sera fixe)
soit tu mesure en js les différentes tailles de tes colonnes, tu prend la plus grande et tu modifi les règles css des autres pour arriver a la mm valeur automatiquement (mais vu l'utilisation que tu en fait, j'opterais pour la première solution.