Gedrehte Elemente in CSS, die die Höhe ihrer Eltern korrekt beeinflussen

Angenommen, ich habe einige Spalten, von denen einige die Werte von:

http://jsfiddle.net/MTyFP/1/

<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>

Mit diesem CSS:

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

Am Ende sieht es so aus:

Ist es möglich, CSS zu schreiben, das bewirkt, dass das gedrehte Element die Höhe des übergeordneten Elements beeinflusst, sodass der Text die anderen Elemente nicht überlappt? Etwas wie das:

Angenommen, Sie möchten um 90 Grad drehen, ist dies auch für Nicht-Text-Elemente möglich - aber wie viele interessante Dinge in CSS erfordert es ein wenig List. Meine Lösung ruft auch technisch undefiniertes Verhalten gemäß der CSS 2-Spezifikation auf. Während ich getestet und bestätigt habe, dass es in Chrome, Firefox, Safari und Edge funktioniert, kann ich Ihnen nicht versprechen, dass es in Zukunft nicht mehr funktioniert Browser-Release.

Kurze Antwort

Bei HTML wie diesem, wo Sie drehen möchten .element-to-rotate...

<div id="container">
  <something class="element-to-rotate">bla bla bla</something>
</div>

... führen Sie zwei Wrapper-Elemente um das Element ein, das Sie drehen möchten:

<div id="container">
  <div class="rotation-wrapper-outer">
    <div class="rotation-wrapper-inner">
      <something class="element-to-rotate">bla bla bla</something>
    </div>    
  </div>
</div>

... und verwenden Sie dann das folgende CSS, um gegen den Uhrzeigersinn zu drehen (oder lesen Sie im Kommentar aus transform, wie Sie es in eine Drehung im Uhrzeigersinn ändern können):

.rotation-wrapper-outer {
  display: table;
}
.rotation-wrapper-inner {
  padding: 50% 0;
  height: 0;
}
.element-to-rotate {
  display: block;
  transform-origin: top left;
  /* Note: for a CLOCKWISE rotation, use the commented-out
     transform instead of this one. */
  transform: rotate(-90deg) translate(-100%);
  /* transform: rotate(90deg) translate(0, -100%); */
  margin-top: -50%;

  /* Not vital, but possibly a good idea if the element you're rotating contains
     text and you want a single long vertical line of text and the pre-rotation
     width of your element is small enough that the text wraps: */
  white-space: nowrap;
}

Stack-Snippet-Demo

p {
  /* Tweak the visuals of the paragraphs for easier visualiation: */
  background: pink;
  margin: 1px 0;
  border: 1px solid black;
}
.rotation-wrapper-outer {
  display: table;
}
.rotation-wrapper-inner {
  padding: 50% 0;
  height: 0;
}
.element-to-rotate {
  display: block;
  transform-origin: top left;
  /* Note: for a CLOCKWISE rotation, use the commented-out
     transform instead of this one. */
  transform: rotate(-90deg) translate(-100%);
  /* transform: rotate(90deg) translate(0, -100%); */
  margin-top: -50%;

  /* Not vital, but possibly a good idea if the element you're rotating contains
     text and you want a single long vertical line of text and the pre-rotation
     width of your element is small enough that the text wraps: */
  white-space: nowrap;
}

<div id="container">
  <p>Some text</p>
  <p>More text</p>
  <div class="rotation-wrapper-outer">
    <div class="rotation-wrapper-inner">
      <p class="element-to-rotate">Some rotated text</p>
    </div>    
  </div>
  <p>Even more text</p>
  <img src="https://i.stack.imgur.com/ih8Fj.png">
  <div class="rotation-wrapper-outer">
    <div class="rotation-wrapper-inner">
      <img class="element-to-rotate" src="https://i.stack.imgur.com/ih8Fj.png">
    </div>
  </div>
  <img src="https://i.stack.imgur.com/ih8Fj.png">
</div>

Wie funktioniert das?

Verwirrung angesichts der Beschwörungsformeln, die ich oben verwendet habe, ist vernünftig; Es ist viel los, und die Gesamtstrategie ist nicht einfach und erfordert einige Kenntnisse der CSS-Trivia, um sie zu verstehen. Lassen Sie uns Schritt für Schritt durchgehen.

Der Kern des Gesichts Problem , das wir ist , dass Transformationen auf ein Element angewendet unter Verwendung seiner transformCSS - Eigenschaft alle geschehen , nachdem das Layout stattgefunden hat. Mit anderen Worten, die Verwendung transformeines Elements wirkt sich überhaupt nicht auf die Größe oder Position seines übergeordneten Elements oder anderer Elemente aus. Es gibt absolut keine Möglichkeit, diese Tatsache zu ändern, wie es transformfunktioniert. Um den Effekt des Drehens eines Elements zu erzielen und die Höhe seines Elternteils der Drehung zu entsprechen, müssen wir die folgenden Dinge tun:

1. Konstruieren Sie irgendwie ein anderes Element, dessen Höhe der Breite des entspricht.element-to-rotate
2. Schreiben Sie unsere Transformation .element-to-rotateso auf, dass sie genau aus Schritt 1 auf das Element gelegt wird.

Das Element aus Schritt 1 muss sein .rotation-wrapper-outer. Aber wie können wir veranlassen , seine Höhe gleich zu sein .element-to-rotate‚s Breite ?

Die Schlüsselkomponente unserer Strategie ist hier die padding: 50% 0auf .rotation-wrapper-inner. Dieser Exploit ist ein exzentrisches Detail der Spezifikation fürpadding : Diese prozentualen Auffüllungen, auch für padding-topund padding-bottom, werden immer als Prozentsätze der Breite des Containers des Elements definiert . Dies ermöglicht es uns, den folgenden zweistufigen Trick auszuführen:

1. Wir setzen display: tableauf .rotation-wrapper-outer. Dies führt dazu, dass es eine Schrumpfbreite hat , was bedeutet, dass seine Breite basierend auf der intrinsischen Breite seines Inhalts festgelegt wird - dh basierend auf der intrinsischen Breite von .element-to-rotate. (Bei der Unterstützung von Browsern könnten wir dies sauberer erreichen width: max-content, aber ab Dezember 2017 max-contentwird dies in Edge immer noch nicht unterstützt .)
2. Wir setzen das heightvon .rotation-wrapper-innerauf 0 und dann das Auffüllen auf 50% 0( dh 50% oben und 50% unten). Dies führt dazu, dass es einen vertikalen Raum einnimmt, der 100% der Breite seines übergeordneten Elements entspricht - was durch den Trick in Schritt 1 gleich der Breite von ist .element-to-rotate.

Als nächstes müssen nur noch die eigentliche Drehung und Positionierung des untergeordneten Elements durchgeführt werden. Natürlich transform: rotate(-90deg)macht die Rotation; Wir verwenden transform-origin: top left;, um die Drehung um die obere linke Ecke des gedrehten Elements zu veranlassen, wodurch die nachfolgende Übersetzung leichter zu begründen ist, da das gedrehte Element direkt über der Stelle verbleibt, an der es sonst gezeichnet worden wäre. Wir können dann translate(-100%)das Element um einen Abstand nach unten ziehen, der seiner Vorrotationsbreite entspricht.

Das bringt die Positionierung immer noch nicht ganz richtig, da wir immer noch die 50% ige obere Polsterung ausgleichen müssen .rotation-wrapper-outer. Dies erreichen wir, indem wir sicherstellen, dass dies der Fall .element-to-rotateist display: block(damit die Ränder ordnungsgemäß funktionieren) und dann einen Wert von -50% anwenden. margin-topBeachten Sie, dass die prozentualen Ränder auch relativ zur Breite des übergeordneten Elements definiert sind.

Und das ist es!

Warum ist dies nicht vollständig spezifikationskonform?

Aufgrund des folgenden Hinweises aus der Definition der prozentualen Auffüllungen und Ränder in der Spezifikation (fettgedruckte Mine):

Der Prozentsatz wird in Bezug auf die Breite des Blocks der generierten Box berechnet , selbst für "Auffüllen oben" und "Auffüllen unten" . Wenn die Breite des enthaltenen Blocks von diesem Element abhängt, ist das resultierende Layout in CSS 2.1 nicht definiert.

Da sich der gesamte Trick darum drehte, das Auffüllen des inneren Wrapper-Elements relativ zur Breite seines Containers zu machen, was wiederum von der Breite seines untergeordneten Elements abhängt, treffen wir diese Bedingung und rufen undefiniertes Verhalten auf. Derzeit funktioniert es jedoch in allen vier gängigen Browsern - im Gegensatz zu einigen scheinbar spezifikationskonformen Änderungen .rotation-wrapper-inner, die ich versucht habe, wie zum Beispiel ein Geschwister .element-to-rotateanstelle eines Elternteils zu werden.

Wie der Kommentar von G-Cyr zu Recht hervorhebt, ist die derzeitige Unterstützung für writing-modemehr als anständig . In Kombination mit einer einfachen Drehung erhalten Sie genau das gewünschte Ergebnis. Siehe das folgende Beispiel.

.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;
}

<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>

Leider (?) Ist es so, dass es funktioniert, obwohl Sie Ihr Element drehen, es hat immer noch eine bestimmte Breite und Höhe, die sich nach dem Drehen nicht ändert. Sie ändern es visuell, aber es gibt keine unsichtbare Verpackungsbox, die ihre Größe ändert, wenn Sie Dinge drehen.

Stellen Sie sich vor, Sie drehen es um weniger als 90 ° (z. B. transform: rotate(45deg)): Sie müssten eine solche unsichtbare Box einführen, die jetzt mehrdeutige Abmessungen aufweist, die auf den ursprünglichen Abmessungen des zu drehenden Objekts und dem tatsächlichen Drehwert basieren.

Plötzlich haben Sie nicht nur das widthund heightdes Objekts, das Sie gedreht haben, sondern auch das widthund heightder "unsichtbaren Box" um sich herum. Stellen Sie sich vor, Sie fordern die äußere Breite dieses Objekts an - was würde es zurückgeben? Die Breite des Objekts oder unsere neue Box? Wie würden wir zwischen beiden unterscheiden?

Daher gibt es kein CSS, das Sie schreiben können, um dieses Verhalten zu beheben (oder sollte ich sagen, "automatisieren"). Natürlich können Sie den übergeordneten Container von Hand vergrößern oder JavaScript schreiben, um dies zu handhaben.

( element.getBoundingClientRectUm ganz klar zu sein, können Sie versuchen , das zuvor erwähnte Rechteck zu erhalten).

Wie in der Spezifikation beschrieben :

Im HTML-Namespace wirkt sich die Transformationseigenschaft nicht auf den Fluss des Inhalts aus, der das transformierte Element umgibt.

Dies bedeutet, dass keine Änderungen am Inhalt des zu transformierenden Objekts vorgenommen werden, es sei denn, Sie führen diese manuell aus.

Das einzige, was bei der Transformation Ihres Objekts berücksichtigt wird, ist der Überlaufbereich:

(...) Die Ausdehnung des Überlaufbereichs berücksichtigt transformierte Elemente. Dieses Verhalten ähnelt dem, was passiert, wenn Elemente über die relative Positionierung versetzt werden .

Sehen Sie diese jsfiddle, um mehr zu erfahren.

Es ist eigentlich ganz gut, diese Situation mit einem Objektversatz zu vergleichen, indem Sie: position: relative- den umgebenden Inhalt nicht ändern, obwohl Sie Ihr Objekt bewegen ( Beispiel ).

Wenn Sie dies mit JavaScript behandeln möchten, werfen Sie einen Blick auf diese Frage.

Verwenden Sie Prozentsätze für paddingund ein Pseudoelement, um den Inhalt zu verschieben. In der JSFiddle habe ich das Pseudoelement rot gelassen, um es anzuzeigen, und Sie müssen die Verschiebung des Textes kompensieren, aber ich denke, das ist der richtige Weg.

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

.statusColumn i, .statusColumn b, .statusColumn em, .statusColumn strong {
  writing-mode: tb-rl;
  white-space: nowrap;
  display: inline-block;
  overflow: visible;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);

  /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;

  /* Should be unset in IE9+ I think. */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.statusColumn b:before{ content:''; padding:50% 0; display:block;  background:red; position:relative; top:20px
}

<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>

http://jsfiddle.net/MTyFP/7/

Eine Beschreibung dieser Lösung finden Sie hier: http://kizu.ru/en/fun/rotated-text/

Bitte beachten Sie die aktualisierte Version in meiner anderen Antwort . Diese Antwort ist nicht mehr gültig und funktioniert einfach nicht mehr. Ich werde es aus historischen Gründen hier lassen.

Diese Frage ist ziemlich alt, aber mit der aktuellen Unterstützung für das .getBoundingClientRect()Objekt und seine widthund heightWerte in Kombination mit der Fähigkeit, diese saubere Methode zusammen mit zu verwenden transform, denke ich, dass meine Lösung auch erwähnt werden sollte.

Sehen sie in Aktion hier . (Getestet in Chrome 42, FF 33 und 37.)

getBoundingClientRectberechnet die tatsächliche Kastenbreite und -höhe des Elements. Ganz einfach können wir also alle Elemente durchlaufen und ihre Mindesthöhe auf die tatsächliche Kastenhöhe ihrer Kinder einstellen.

$(".statusColumn").each(function() {
    var $this = $(this),
        child = $this.children(":first");
    $this.css("minHeight", function() {
        return child[0].getBoundingClientRect().height;
    });
});

(Mit einigen Änderungen können Sie die Kinder durchlaufen und herausfinden, welches das größte ist, und die Größe des Elternteils auf das größte Kind einstellen. Ich habe mich jedoch entschlossen, das Beispiel einfacher zu gestalten. Sie können auch das Polster des Elternteils zum hinzufügen Höhe, wenn Sie möchten, oder Sie können eine relevante verwenden box-sizing Wert in CSS verwenden.)

Beachten Sie jedoch, dass ich Ihrem CSS ein translateund hinzugefügt habe transform-origin, um die Positionierung flexibler und genauer zu gestalten.

transform: rotate(-90deg) translateX(-100%);
transform-origin: top left;

Ich weiß, dass es ein alter Beitrag ist, aber ich habe ihn gefunden, als ich mit genau dem gleichen Problem zu kämpfen hatte. Die Lösung, die für mich funktioniert, ist eine ziemlich grobe "Low-Tech" -Methode, bei der einfach die Div, die ich um 90 Grad drehe, mit viel umgeben wird

<br>

Wenn ich die ungefähre Breite (die nach der Drehung zur Höhe wird) von div kenne, kann ich den Unterschied ausgleichen, indem ich brs um dieses div hinzufüge, damit der Inhalt oben und unten entsprechend verschoben wird.