Éléments tournés dans CSS: influençant correctement la hauteur du parent

dans CSS, il est possible de faire tourner les éléments sans affecter la mise en page ou le flux du document. Cependant, des questions surviennent lorsque les éléments ont besoin que leur texte tourné ait un impact sur la hauteur de leur parent.

Considérez le scénario suivant:

  
Normal
  
Normal
  
Rotated
  
Normal

En appliquant les css suivants:

.statusColumn b {
  writing-mode: tb-rl;
  white-space: nowrap;
  display: inline-block;
  overflow: visible;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

entraîne le texte rotatif qui se chevauche des éléments voisins. L'objectif est de modifier le CSS pour s'assurer que l'élément rotatif affecte correctement la hauteur de son parent, empêchant le chevauchement du texte. Position: relative; Border: 1px solide #ccc; rembourrage: 2px; marge: 2px; Largeur: 200px; } .Statumolumn I, .Statumolumn B, .StaturSolumn Em, .StaturSolumn Strong { mode d'écriture: Vertical-RL; transformée: rotation (180deg); Espace blanc: Nowrap; Affichage: bloc en ligne; débordement: visible; }

Ce CSS mis à jour garantit que l'élément rotatif respecte la hauteur de son conteneur parent, empêchant ainsi le texte de texte et atteignant la disposition souhaitée.