7
votes

Définir le mode d'écriture / la direction du texte en haut en haut

Je ne trouve pas de solution pour que les éléments verts commencent en bas à droite du conteneur, comme dans l'image droite ("besoin").

est que CSS fournit un moyen d'aligner / orienter des éléments du bas ? p>

"Par défaut" et "besoin" de l'emplacement de l'élément illustré. P>

snippet p>

<div class="cnt">
  <div class="itm">1</div>
  <div class="itm">2</div>
  <div class="itm">3</div>
  <div class="itm">4</div>
  <div class="itm">5</div>
  <div class="itm">6</div>
  <div class="itm">7</div>
  <div class="itm">8</div>
</div>

html css flexbox css-transforms

0 commentaires

3 Réponses :

1
votes

Il est facile si vous pouvez inverser l'ordre des iTM dans la source.

<div class="cnt">
  <div class="itm">8</div>
  <div class="itm">7</div>
  <div class="itm">6</div>
  <div class="itm">5</div>
  <div class="itm">4</div>
  <div class="itm">3</div>
  <div class="itm">2</div>
  <div class="itm">1</div>
</div>

2 commentaires

Transformer la rotation ne peut pas utiliser une cause déjà utilisée pour la balance et la transition. Il fera pivoter le bloc à la place ou avec une échelle et une transition

@DMitry, vous devriez alors poster un exemple plus complet de votre CSS existant.

3
votes

CSS fournit-il un moyen d'aligner / orienter des éléments du bas? P>
surprenant, en mode d'écriture horizontal, il n'apparaît donc pas. p>
Il existe différentes propriétés, y compris mode d'écriture code>, direction code>, orientation de texte code> et flex-direction code>, qui vous permet de réorganiser le flux de contenu. p>
mais aucun d'entre eux ne semble autoriser la pose hors de contenu en mode d'écriture horizontal à partir du bas à droite. Peut-être que quelqu'un pourrait me corriger à ce sujet. P>
Entre-temps, voici un hack (pur CSS): p>

p>
<div class="cnt"> <div class="itm">8</div> <div class="itm">7</div> <div class="itm">6</div> <div class="itm">5</div> <div class="itm">4</div> <div class="itm">3</div> <div class="itm">2</div> <div class="itm">1</div> </div>

0 commentaires

0
votes

Je sais que ce n'est pas exactement ça, mais c'est le plus proche que je puisse obtenir avec une solution pure CSS. C'est assez moche, cependant. Publier davantage de sorte que d'autres puissent le voir et l'utiliser pour accéder à la bonne réponse.

<div class="cnt">
  <div class="itm">1</div>
  <div class="itm">2</div>
  <div class="itm">3</div>
  <div class="itm">4</div>
  <div class="itm">5</div>
  <div class="itm">6</div>
  <div class="itm">7</div>
  <div class="itm">8</div>
</div>

0 commentaires