
Ou comment afficher plusieurs blocs à la même hauteur
syntaxe:
< div>...< /div>
< div>...< /div>
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
{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
1test
2test


3test
testtest
testtest
testtest
test
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
test test
test test
test test
test