องค์ประกอบที่หมุนเวียนใน CSS ที่ส่งผลต่อความสูงของผู้ปกครองอย่างถูกต้อง

สมมติว่าฉันมีคอลัมน์สองสามคอลัมน์ซึ่งบางคอลัมน์ฉันต้องการหมุนค่าของ:

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>

ด้วย CSS นี้:

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

มันจะออกมาเป็นแบบนี้:

เป็นไปได้ไหมที่จะเขียน CSS ที่จะทำให้องค์ประกอบที่หมุนแล้วส่งผลต่อความสูงของพาเรนต์เพื่อให้ข้อความไม่ทับซ้อนกับองค์ประกอบอื่น ๆ สิ่งนี้:

สมมติว่าคุณต้องการหมุน 90 องศาซึ่งเป็นไปได้แม้กระทั่งสำหรับองค์ประกอบที่ไม่ใช่ข้อความ แต่ก็เหมือนกับสิ่งที่น่าสนใจมากมายใน CSS ก็ต้องใช้ไหวพริบเล็กน้อย วิธีแก้ปัญหาของฉันยังเรียกใช้พฤติกรรมที่ไม่ได้กำหนดตามข้อกำหนดของ CSS 2 ในทางเทคนิคดังนั้นในขณะที่ฉันทดสอบและยืนยันว่าใช้งานได้ใน Chrome, Firefox, Safari และ Edge ฉันไม่สามารถสัญญากับคุณได้ว่ามันจะไม่พังในอนาคต การเปิดตัวเบราว์เซอร์

คำตอบสั้น ๆ

กำหนด HTML แบบนี้คุณต้องการหมุนตรงไหน.element-to-rotate...

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

... แนะนำองค์ประกอบกระดาษห่อสองชิ้นรอบ ๆ องค์ประกอบที่คุณต้องการหมุน:

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

... จากนั้นใช้ CSS ต่อไปนี้เพื่อหมุนทวนเข็มนาฬิกา (หรือดูความคิดเห็นtransformสำหรับวิธีเปลี่ยนเป็นการหมุนตามเข็มนาฬิกา):

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

การสาธิตตัวอย่างข้อมูลสแต็ก

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>

วิธีนี้ทำงานอย่างไร?

ความสับสนเมื่อเผชิญกับคาถาที่ฉันใช้ข้างต้นนั้นสมเหตุสมผล มีหลายอย่างเกิดขึ้นและกลยุทธ์โดยรวมไม่ตรงไปตรงมาและต้องใช้ความรู้เกี่ยวกับ CSS เล็กน้อยเพื่อทำความเข้าใจ ผ่านมันไปทีละขั้นตอน

หลักของปัญหาที่เราเผชิญคือการเปลี่ยนแปลงที่นำไปใช้กับองค์ประกอบโดยใช้transformคุณสมบัติ CSS ทั้งหมดเกิดขึ้นหลังจากที่มีการจัดวาง กล่าวอีกนัยหนึ่งคือการใช้transformกับองค์ประกอบจะไม่มีผลต่อขนาดหรือตำแหน่งของพาเรนต์หรือองค์ประกอบอื่น ๆ เลย ไม่มีวิธีใดที่จะเปลี่ยนแปลงข้อเท็จจริงเกี่ยวกับวิธีการtransformทำงานนี้ได้อย่างแน่นอน ดังนั้นในการสร้างเอฟเฟกต์ของการหมุนองค์ประกอบและการมีความสูงของพาเรนต์ตามการหมุนเราจำเป็นต้องทำสิ่งต่อไปนี้:

1. สร้างองค์ประกอบอื่นที่มีความสูงเท่ากับความกว้างของไฟล์.element-to-rotate
2. เขียนการแปลงของเรา.element-to-rotateเช่นเพื่อซ้อนทับบนองค์ประกอบจากขั้นตอนที่ 1

องค์ประกอบจากขั้นตอนที่ 1 .rotation-wrapper-outerจะเป็น แต่วิธีการที่เราสามารถทำให้เกิดของความสูงให้เท่ากับ.element-to-rotate's กว้าง ?

องค์ประกอบสำคัญในกลยุทธ์ของเราอยู่ที่นี่ในpadding: 50% 0 .rotation-wrapper-innerการใช้ประโยชน์นี้เป็นรายละเอียดที่ผิดปกติของข้อมูลจำเพาะสำหรับpadding : เปอร์เซ็นต์การพายเรือแม้กระทั่งสำหรับpadding-topและpadding-bottomจะถูกกำหนดเป็นเปอร์เซ็นต์ของความกว้างของคอนเทนเนอร์ขององค์ประกอบเสมอ สิ่งนี้ช่วยให้เราสามารถใช้เคล็ดลับสองขั้นตอนต่อไปนี้:

1. เราตั้งอยู่บนdisplay: table .rotation-wrapper-outerนี่เป็นสาเหตุให้มีการหดตัวเพื่อให้พอดีกับความกว้างซึ่งหมายความว่าความกว้างของมันจะตั้งอยู่บนพื้นฐานของความกว้างที่แท้จริงของเนื้อหา - .element-to-rotateนั่นคือขึ้นอยู่กับความกว้างที่แท้จริงของ (บนเบราว์เซอร์ที่สนับสนุนเราสามารถบรรลุนี้มากขึ้นอย่างหมดจดด้วยwidth: max-contentแต่ ณ เดือนธันวาคมปี 2017 max-contentจะยังคงไม่ได้รับการสนับสนุนในขอบ .)
2. เราตั้งค่าheightของ.rotation-wrapper-innerเป็น 0 จากนั้นตั้งค่า padding เพื่อ50% 0(นั่นคือด้านบน 50% และ 50% ล่าง) นี้ทำให้เกิดการใช้พื้นที่แนวตั้งเท่ากับ 100% ของความกว้างของแม่ - ซึ่งผ่านเคล็ดลับในขั้นตอนที่ 1 .element-to-rotateจะมีค่าเท่ากับความกว้างของ

ต่อไปสิ่งที่เหลืออยู่คือการหมุนและการวางตำแหน่งขององค์ประกอบลูกที่แท้จริง ตามธรรมชาติแล้วtransform: rotate(-90deg)การหมุนจะทำ; เราใช้transform-origin: top left;เพื่อทำให้การหมุนเกิดขึ้นรอบ ๆ มุมซ้ายบนขององค์ประกอบที่หมุนซึ่งทำให้การแปลในภายหลังนั้นง่ายขึ้นในการหาเหตุผลเนื่องจากจะปล่อยให้องค์ประกอบที่หมุนอยู่ด้านบนโดยตรงซึ่งจะถูกดึงออกมา จากนั้นเราสามารถใช้translate(-100%)เพื่อลากองค์ประกอบลงด้านล่างโดยมีระยะทางเท่ากับความกว้างก่อนการหมุน

ที่ยังคงไม่ได้ค่อนข้างได้รับการวางตำแหน่งที่เหมาะสมเพราะเรายังคงต้องชดเชยสำหรับชั้น padding .rotation-wrapper-outer50% เราประสบความสำเร็จที่โดยมั่นใจว่า.element-to-rotateได้display: block(เพื่อให้อัตรากำไรขั้นต้นจะทำงานอย่างถูกต้องในนั้น) และจากนั้นใช้ -50% margin-top- ทราบว่าอัตรากำไรขั้นต้นร้อยละจะยังกำหนดเทียบกับความกว้างขององค์ประกอบหลักที่

แค่นี้แหละ!

เหตุใดจึงไม่เป็นไปตามข้อกำหนดอย่างสมบูรณ์

เนื่องจากหมายเหตุต่อไปนี้จากคำจำกัดความของเปอร์เซ็นต์การพายและระยะขอบในข้อมูลจำเพาะ (ตัวหนาของฉัน):

เปอร์เซ็นต์ที่มีการคำนวณเกี่ยวกับความกว้างของสร้างกล่องที่มีบล็อกแม้สำหรับ'padding-top box'และ'ช่องว่างด้านล่าง' หากความกว้างของบล็อกที่มีขึ้นอยู่กับองค์ประกอบนี้เค้าโครงผลลัพธ์จะไม่ได้กำหนดไว้ใน CSS 2.1

เนื่องจากเคล็ดลับทั้งหมดวนเวียนอยู่กับการทำให้ส่วนขยายขององค์ประกอบ wrapper ด้านในสัมพันธ์กับความกว้างของคอนเทนเนอร์ซึ่งจะขึ้นอยู่กับความกว้างของลูกเราจึงเข้าสู่เงื่อนไขนี้และเรียกใช้พฤติกรรมที่ไม่ได้กำหนด ขณะนี้ใช้งานได้ในเบราว์เซอร์หลักทั้ง 4 เบราว์เซอร์ - ซึ่งแตกต่างจากการปรับแต่งตามข้อกำหนดบางอย่างที่ดูเหมือนว่าเป็นไปตามข้อกำหนดที่ฉันได้ลองใช้เช่นการเปลี่ยน.rotation-wrapper-innerเป็นพี่น้อง.element-to-rotateแทนผู้ปกครอง

ในฐานะที่เป็นความคิดเห็นโดย G-Cyrชอบธรรมชี้ให้เห็นในปัจจุบันได้รับการสนับสนุนwriting-modeเป็นมากกว่าดี เมื่อรวมกับการหมุนแบบธรรมดาคุณจะได้ผลลัพธ์ที่แน่นอนที่คุณต้องการ ดูตัวอย่างด้านล่าง

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

น่าเสียดายที่ (?) นี่เป็นวิธีการทำงานแม้ว่าคุณจะหมุนองค์ประกอบของคุณ แต่ก็ยังคงมีความกว้างและความสูงที่แน่นอนซึ่งไม่เปลี่ยนแปลงหลังจากการหมุน คุณเปลี่ยนมันด้วยสายตา แต่ไม่มีกล่องห่อที่มองไม่เห็นซึ่งเปลี่ยนขนาดเมื่อคุณหมุนสิ่งของ

ลองนึกภาพการหมุนมันน้อยกว่า 90 ° (เช่นtransform: rotate(45deg)): คุณจะต้องแนะนำกล่องที่มองไม่เห็นซึ่งตอนนี้มีขนาดที่คลุมเครือตามขนาดดั้งเดิมของวัตถุที่คุณกำลังหมุนและค่าการหมุนจริง

ทันใดนั้นคุณไม่เพียง แต่มีwidthและheightของวัตถุที่คุณหมุนเท่านั้น แต่คุณยังมีwidthและheight"กล่องล่องหน" อยู่รอบ ๆ ด้วย ลองนึกภาพการขอความกว้างด้านนอกของวัตถุนี้ - มันจะส่งคืนอะไร? ความกว้างของวัตถุหรือกล่องใหม่ของเรา? เราจะแยกความแตกต่างระหว่างทั้งสองอย่างอย่างไร?

ดังนั้นจึงไม่มี CSS ที่คุณสามารถเขียนเพื่อแก้ไขพฤติกรรมนี้ได้ (หรือฉันควรจะพูดว่า "ทำให้อัตโนมัติ") แน่นอนคุณสามารถเพิ่มขนาดคอนเทนเนอร์หลักของคุณด้วยมือหรือเขียน JavaScript เพื่อจัดการกับสิ่งนั้น

(เพื่อความชัดเจนคุณสามารถลองใช้element.getBoundingClientRectเพื่อรับสี่เหลี่ยมผืนผ้าที่กล่าวถึงก่อนหน้านี้)

ตามที่อธิบายไว้ในข้อมูลจำเพาะ :

ในเนมสเปซ HTML คุณสมบัติการแปลงไม่มีผลต่อการไหลของเนื้อหาที่อยู่รอบองค์ประกอบที่ถูกแปลง

ซึ่งหมายความว่าจะไม่มีการเปลี่ยนแปลงใด ๆ กับเนื้อหารอบ ๆ วัตถุที่คุณกำลังเปลี่ยนเว้นแต่คุณจะทำด้วยมือ

สิ่งเดียวที่นำมาพิจารณาเมื่อคุณเปลี่ยนวัตถุของคุณคือพื้นที่ล้น:

(... ) ขอบเขตของพื้นที่ล้นคำนึงถึงองค์ประกอบที่เปลี่ยนแปลง ลักษณะการทำงานนี้คล้ายกับสิ่งที่เกิดขึ้นเมื่อองค์ประกอบที่จะถูกชดเชยผ่านการวางตำแหน่งญาติ

ดู jsfiddle นี้เพื่อเรียนรู้เพิ่มเติม

เป็นเรื่องดีที่จะเปรียบเทียบสถานการณ์นี้กับอ็อบเจกต์ออฟเซ็ตโดยใช้: position: relative- เนื้อหารอบข้างไม่เปลี่ยนแปลงแม้ว่าคุณจะย้ายวัตถุไปรอบ ๆ ( ตัวอย่าง )

หากคุณต้องการที่จะจัดการกับปัญหานี้โดยใช้ JavaScript, มีลักษณะที่นี้คำถาม

ใช้เปอร์เซ็นต์สำหรับpaddingและองค์ประกอบหลอกเพื่อผลักดันเนื้อหา ใน JSFiddle ฉันปล่อยให้องค์ประกอบหลอกเป็นสีแดงเพื่อแสดงและคุณจะต้องชดเชยการเปลี่ยนแปลงของข้อความ แต่ฉันคิดว่านั่นคือวิธีที่จะไป

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

สามารถอ่านรายละเอียดของโซลูชันนี้ได้ที่นี่: http://kizu.ru/en/fun/rotated-text/

โปรดดูรุ่นที่ปรับปรุงในคำตอบอื่น ๆ ของฉัน คำตอบนี้ใช้ไม่ได้อีกต่อไปและใช้ไม่ได้อีกต่อไป ฉันจะทิ้งไว้ที่นี่ด้วยเหตุผลทางประวัติศาสตร์

คำถามนี้ค่อนข้างเก่า แต่ด้วยการสนับสนุนในปัจจุบันสำหรับ.getBoundingClientRect()วัตถุและของwidthและheightค่าเมื่อรวมกับความสามารถในการใช้วิธีการที่ประณีตนี้ร่วมกับtransformฉันคิดว่าควรกล่าวถึงวิธีแก้ปัญหาของฉันด้วย

เห็นในการกระทำที่นี่ (ทดสอบใน Chrome 42, FF 33 และ 37)

getBoundingClientRectคำนวณความกว้างและความสูงของกล่องจริงขององค์ประกอบ จากนั้นเราสามารถวนองค์ประกอบทั้งหมดและตั้งค่าความสูงต่ำสุดเป็นความสูงของกล่องจริงของลูก ๆ

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

(ด้วยการปรับเปลี่ยนบางอย่างคุณสามารถวนรอบเด็ก ๆ และค้นหาว่าอันไหนสูงที่สุดและกำหนดความสูงของผู้ปกครองเป็นเด็กที่สูงที่สุดอย่างไรก็ตามฉันตัดสินใจที่จะทำให้ตัวอย่างตรงไปตรงมามากขึ้นนอกจากนี้คุณยังสามารถเพิ่มช่องว่างภายในของผู้ปกครองลงใน ความสูงหากคุณต้องการหรือคุณสามารถใช้box-sizingค่าที่เกี่ยวข้องใน CSS)

อย่างไรก็ตามโปรดทราบว่าฉันได้เพิ่มtranslateและtransform-originลงใน CSS ของคุณเพื่อให้การวางตำแหน่งมีความยืดหยุ่นและแม่นยำยิ่งขึ้น

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

ฉันรู้ว่ามันเป็นโพสต์เก่า แต่ฉันพบมันในขณะที่กำลังต่อสู้กับปัญหาเดียวกัน วิธีแก้ปัญหาที่เหมาะกับฉันค่อนข้างหยาบ "เทคโนโลยีต่ำ" เพียงแค่ล้อมรอบ div ที่ฉันหมุนด้วย 90deg ด้วยจำนวนมาก

<br>

เมื่อทราบความกว้างโดยประมาณ (ซึ่งกลายเป็นความสูงหลังการหมุน) ของ div ฉันสามารถชดเชยความแตกต่างได้โดยการเพิ่ม br รอบ div นี้เพื่อให้เนื้อหาด้านบนและด้านล่างถูกดันตาม