frendeitpt

sameheight ~ blocs à la même hauteur

Ou comment afficher plusieurs blocs à la même hauteur

🆙 sameheight : égalise la hauteur des enfants directs du bloc (p ou div)

Cliquer pour lire la documentation

syntaxe:
{up sameheight}
< div>...< /div>
< div>...< /div>
{/up sameheight}
note: gestion de la largeur avec l'option "css-head" qui ajoute du code css dans le head
exemple: css-head=.sameheight[float:left;width:30%;]
Attention: remplacer les {} par []
author Lomart version UP-1.0 - 07/2017 license GNU/GPLv3 credit un vieux script de mes archives tags HTML
  • sameheight: inutilisé
  • class:
  • style:
  • css-head (base-css): code css libre dans le head. attention: ] au lieu de }

    Un vieux script que j'ai adapté en action "au cas où". Il met à la même hauteur tous les blocs enfants

    {up sameHeight | debug 
| css-head=.sameheight div[display:inline-grid;width:30%;margin:5px;border:plum solid 1px;vertical-align:middle] 
| style=text-align:center;background-color:lightyellow;
}
<div>1test</div>
<div>2test<br /><img src="/images/photos/Ecureuil-rouge-eurasien.jpg" alt=""/></div>
<div>3test<br />testtest<br />testtest<br />testtest<br />test</div>
{/up sameHeight}
    css-head
    ajoute des propriétés CSS dans le head pour les enfants div la classe .sameheight affectée au bloc conteneur.
    style
    une petite personnalisation du conteneur
    voir les explicationsreplier
    1test
    2test
    3test
    testtest
    testtest
    testtest
    test

    Pour mémoire, on obtient la même chose (et même plus) avec flexbox

    {up flexbox=4-4-4 | class=fg-gap fg-child-vcenter fg-child-center | class-*=bd-violet}
<div>Cellule n°1</div>
<div><div>Cellule n°2<br /><img src="/images/photos/Ecureuil-rouge-eurasien.jpg" alt=""/></div></div>
<div>Cellule n°1<br />test test<br />test test<br />test test<br />test</div>
{/up flexbox}
    Cellule n°1
    Cellule n°2
    Cellule n°1
    test test
    test test
    test test
    test