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 @license: GNU/GPLv3 @credit: un vieux script de mes archives @tags: HTML
  • sameheight: inutilisé
  • id:
  • class: classe(s) pour bloc principal
  • style: style pour bloc principal
  • 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.

Des solutions CSS plus élégantes existant aujourd'hui, je vous déconseille de d'utiliser cette action.

{up sameHeight 
| 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
Pour info, cette page utilise 5 action(s) :
upactionslist (1) readmore (1) sameHeight (1) flexbox (1) jcontent-info (1)
Détails