Comment puis-je faire en sorte que les éléments CSS pivotés influencent correctement la hauteur de leurs parents ?

Éléments pivotés en CSS : influencer correctement la hauteur des parents

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

Considérez le scénario suivant :

<div class="container">
  <div class="statusColumn"><span>Normal</span></div>
  <div class="statusColumn"><a>Normal</a></div>
  <div class="statusColumn"><b>Rotated</b></div>
  <div class="statusColumn"><abbr>Normal</abbr></div>
</div>

Application du CSS suivant :

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

Le texte pivoté chevauche les éléments voisins. L'objectif est de modifier le CSS pour garantir que l'élément pivoté affecte correctement la hauteur de son parent, évitant ainsi le chevauchement du texte.

Solution

Profiter de la prise en charge améliorée de l'écriture -mode dans les navigateurs modernes, une solution peut être obtenue en utilisant une combinaison de propriétés :

.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 CSS mis à jour garantit que l'élément pivoté respecte la hauteur de son conteneur parent, empêchant ainsi le chevauchement de texte et obtenant la mise en page 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!