Ajouter une largeur à la partie gauche d'un div ?

Question

Comment ajouter N pixels à la largeur d'une division, mais ajouter cette largeur supplémentaire au côté gauche de la division ?

Par exemple, il suffit d'augmenter sa largeur de 20px pour ajouter 20px sur le côté droit.

D'autre part, je pourrais ajouter left-padding mais ça ne suffit pas pour moi.

Existe-t-il un moyen d'étendre véritablement la division vers la gauche à l'aide de CSS ou de Javascript ?

Même question concernant l'expansion vers le haut au lieu de l'expansion vers le bas si la hauteur est modifiée.

Answer 1

Voici quelques options possibles :

• Ajustez le CSS direction pour rendre le mode d'écriture RTL.
• Utilisez la mise en page flex avec flex-direction: row-reverse pour le problème de la largeur.

• Utilisez la mise en page flex avec flex-direction: column-reverse pour le problème de la hauteur.

  div { direction: rtl; width: 400px; / width: 450px; / background-color: lightgray; height: 25px; } p { display: flex; flex-direction: row-reverse; width: 450px; / width: 500px; / background-color: lightgreen; height: 25px; } span { display: flex; flex-direction: column-reverse; height: 50px; / height: 150px; / background-color: aqua; }

  <div>with RTL, width expands the div leftward</div> <p>with flex-direction: row-reverse, to p simulates leftward expansion</p> <span>with flex-direction: column-reverse, the span simulates upward expansion</span>