0
votes

Inverser l'ordre de tous les éléments

J'ai essayé d'utiliser

CSS: p> xxx pré>

et p>

javascript: p> xxx pré> Pour inverser l'ordre de la portée à l'intérieur de la DIV tout en les gardant en ligne, mais ne fonctionne pas p>

10    9    8    7
6     5    4    3
2     1

javascript html css twitter-bootstrap

4 commentaires

C'est effectivement une question différente de ce que tout le monde ci-dessous répondu ci-dessous - vous avez donc plusieurs réponses basées sur votre question initiale qui n'a aucun sens. Assurez-vous que votre question est exacte et exactement ce que vous avez l'intention de demander avant de soumettre.

Ce n'est pas si utile de changer votre question au travail sans fléchir tout d'un coup. Les gens ont déjà répondu à votre question. Faire ressembler à une bootstrap ou à l'aide du système de grille dans leurs réponses est hors de portée de votre question.

Demandé et répondit, il convient de revoir à Stackoverflow.com/revisisions/55361689/1

Lorsqu'on leur a demandé à la question de penser que la fonctionnalité ne serait pas changée, mais j'ai trouvé la différence alors fallait le réparer avec le CSS actuel DÉSOLÉ sur la confusion

4 Réponses :

1
votes

Vous pouvez utiliser flex-direction: ligne-revers code> ici, avec justify-contenu code> pour aligner les éléments à gauche au lieu de droite qui se produira lorsque vous utilisez Le Row-Revers code> comme valeur.

p>



<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
  <span>9</span>
  <span>10</span>
</div>

0 commentaires

2
votes

Vous pouvez le faire en suivant:

Utilisez QuerySelectorall () CODE> Pour obtenir tout code> éléments li>
Utilisez l'opérateur de la propagation pour convertir le résultat de QuerySelectorallall code> à Array code> li>
Utilisez array.pototype.Reverse () code> sur ce li>

 Utilisez  QuerySelector ()  code> pour obtenir    code> et utilisez  appendict  code> au lieu de  innerhtml  code>  li>
 ul>   p> 


<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
  <span>9</span>
  <span>10</span>
</div>

0 commentaires

3
votes

Vous pouvez utiliser flex-direction: ligne-revers code> et justify-contenu: flex-end code>

p>



<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<button onClick='change()'>Reverse</button>
<div class="row">
  <span class="col-3">1</span>
  <span class="col-3">2</span>
  <span class="col-3">3</span>
  <span class="col-3">4</span>
  <span class="col-3">5</span>
  <span class="col-3">6</span>
  <span class="col-3">7</span>
  <span class="col-3">8</span>
  <span class="col-3">9</span>
  <span class="col-3">10</span>
</div>

2 commentaires

@Joedoe a ajouté une méthode avec JS aussi

Existe-t-il une méthode pour la mise en oeuvre de masse à l'aide de JavaScript au lieu d'ajouter un par un pour couvre plus de 1000 spans pour la vitesse?

0
votes

avec colonne-inverse code>, vous les transformez efficacement en éléments bloquants, alors qu'il modifiera la commande, il mettra également la el / code> éléments sous l'autre. .

Je suggérerais d'essayer Row-Revers code> à la place - cela les gardera toutes en ligne tout en vous donnant la commande souhaitée. Ensuite, pour que cela reste sur le côté gauche de la page, utilisez justify-contenu: flex-extrémité; code> comme ci-dessous: p>

p>



<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
  <span>9</span>
  <span>10</span>
</div>

0 commentaires