Comment puis-je m'assurer que les éléments CSS pivotés ajustent avec précision la hauteur de leurs parents ?

Éléments pivotés en CSS affectant la hauteur des parents avec précision

En CSS, la rotation des éléments à l'aide de la propriété writing-mode et de la transformation peut parfois entraîner des problèmes avec la hauteur de l'élément parent ne s'ajustant pas correctement. Cela peut entraîner un chevauchement de texte ou des effets visuels indésirables.

Par exemple, disons que nous avons un conteneur avec plusieurs colonnes, dans lequel nous souhaitons faire pivoter le texte dans l'une des colonnes. Sans CSS approprié, l'élément pivoté peut ne pas affecter la hauteur du parent, provoquant le chevauchement du texte avec d'autres éléments.

Pour résoudre ce problème, nous pouvons utiliser la propriété writing-mode pour spécifier comment le texte doit être écrit dans l'élément. Dans ce cas, on peut utiliser la valeur "vertical-rl" pour écrire le texte verticalement et de droite à gauche. De plus, la propriété transform peut être utilisée pour faire pivoter l'élément de 180 degrés pour obtenir l'effet souhaité.

En combinant ces propriétés, l'élément pivoté affectera désormais correctement la hauteur du parent, garantissant que le texte s'adapte à l'intérieur de l'élément. colonne et ne chevauche pas d’autres éléments. Voici un exemple de code CSS :

.statusColumn {
  position: relative;
  border: 1px solid #ccc;
  padding: 2px;
  margin: 2px;
  width: 200px;
}

.statusColumn i,
.statusColumn b,
.statusColumn em,
.statusColumn strong {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  display: inline-block;
  overflow: visible;
}

Ce code garantira que les éléments pivotés affectent correctement la hauteur de leur parent, empêchant ainsi le chevauchement du texte et permettant l'apparence visuelle souhaitée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!