css hauteur hauteur problème avec grille comme mise en page

Question

J'ai donc une grande forme et j'ai regroupé les éléments similaires dans fieldsets mais tous les fieldsets ont des hauteurs différentes. Je fais flotter les fieldsets vers la gauche de sorte que tous les fieldsets supplémentaires seront poussés en dessous (pensez à la rangée suivante quand vous atteignez le bord de l'écran).

Comment puis-je obtenir tous les ensembles de champs pour avoir la même hauteur que le plus grand fieldset de cette rangée?

fieldset { 
    float: left; 
    width: 278px; 
    margin: 10px; 
    height: inherit; 
    display: inline; 
    border: 1px solid #000000; 
} 

Cela fonctionne un peu à l'exception du problème de hauteur. Je ne veux pas d'une vraie grille mais d'une disposition de grille dynamique, donc si quelqu'un avec un écran de 800x600 regarde le site et que j'ai neuf fieldsets sur la page ils devraient voir quelque chose comme une grille de 3x3. Si vous avez un écran plus grand, vous pourriez voir quelque chose comme une grille 5x4.

Answer 1

Vous allez avoir à faire quelques choix, car cela ne peut être fait exactement comme vous le souhaitez en utilisant CSS pur. Avec Javascript, vous pouvez faire ce travail, mais pas de CSS pur.

Dans cet esprit. Vous pouvez remplacer les fieldsets par des divs scrollables pour obtenir une version CSS de ce que vous voulez (notez que le contenu complet de la div ne sera pas affiché dans tous les cas, l'utilisateur devra peut-être faire défiler). Exemple:

<style> 
    div { 
    float: left; 
    width: 278px; 
    margin: 10px; 
    height: 100px; 
    border: 1px solid #000000; 
    overflow: auto; 
    } 
</style> 

Vous pouvez l'essayer here

Enfin, l'autre choix serait de manipuler la hauteur des fieldsets en utilisant javascript après que les éléments ont chargé.