« Wikilivres/Version mobile » : différence entre les versions
Contenu supprimé Contenu ajouté
Aucun résumé des modifications |
|||
Ligne 32 :
Pour éviter les problèmes, il est recommandé d'utiliser '''la classe CSS "flexible"''' sur la table, qui permet aux tables de s'afficher verticalement quand la largeur disponible est réduite (inférieure à 720 pixels).
== Colonnes ==
L'affichage de plusieurs colonnes n'est pas possible sur les appareils mobiles à largeur limitée.
Pour les colonnes, utilisez la classe CSS "flex-content" pour le conteneur et selon le nombre de colonnes :
* pour 2 colonnes, utilisez la classe CSS "flex-content-half" pour chaque des colonnes ;
* pour 3 colonnes, utilisez la classe CSS "flex-content-third" pour chaque des colonnes.
Exemple :
<pre><nowiki>
----
<div class="flex-content">
<div class="flex-content-half">
<div style="font-size: 40pt">Colonne 1</div>
Le contenu de la première colonne...
</div>
<div class="flex-content-half">
<div style="font-size: 40pt">Colonne 2</div>
Le contenu de la deuxième colonne...
</div>
</div>
----
<div class="flex-content">
<div class="flex-content-third">
<div style="font-size: 40pt">Colonne 1</div>
Le contenu de la première colonne...
</div>
<div class="flex-content-third">
<div style="font-size: 40pt">Colonne 2</div>
Le contenu de la deuxième colonne...
</div>
<div class="flex-content-third">
<div style="font-size: 40pt">Colonne 3</div>
Le contenu de la troisième colonne...
</div>
</div>
----
</nowiki></pre>
----
<div class="flex-content">
<div class="flex-content-half">
<div style="font-size: 40pt">Colonne 1</div>
Le contenu de la première colonne...
</div>
<div class="flex-content-half">
<div style="font-size: 40pt">Colonne 2</div>
Le contenu de la deuxième colonne...
</div>
</div>
----
<div class="flex-content">
<div class="flex-content-third">
<div style="font-size: 40pt">Colonne 1</div>
Le contenu de la première colonne...
</div>
<div class="flex-content-third">
<div style="font-size: 40pt">Colonne 2</div>
Le contenu de la deuxième colonne...
</div>
<div class="flex-content-third">
<div style="font-size: 40pt">Colonne 3</div>
Le contenu de la troisième colonne...
</div>
</div>
----
{{AutoCat}}
| |||