如何旋转div中的元素，div将根据旋转的元素改变其高度和宽度?

Question

我的问题是当我在这个div内旋转我的h2元素时，高度和宽度保持不变。我想让我的div根据它的内容改变它的高度和宽度。第一个图像没有旋转h2元素。第二张图片是我在h2元素上应用旋转变换的地方。

第一个图片:没有旋转

第二个图片:与旋转

这是我的代码:

HTML:

<!-- Gallery Title and Nav-->
<div class="gallery-title-and-nav">
<!-- Gallery title -->
<div class="gallery-title">
<h2>GALLERY</h2>
</div>
<!-- gallery pciker -->
<div class="gallery-nav">
<h4>POSTER</h4>
<h4>INFOGRAPHICS</h4>
<h4>MAGAZINE 01</h4>
<h4>MAGAZINE 02</h4>
</div>
</div>

CSS:

/* Gallery Title and Nav */
.gallery-title-and-nav {
position: absolute;
background: red;
height: 60vh;
width: fit-content;
top: 50%;
left: 0;
transform: translate(0, -50%);
overflow: hidden;
color: white;
display: flex;
flex-direction: row;
align-items: center;
flex-basis: auto
}
.gallery-title {
background: green;
height: fit-content;
width: fit-content;
}
.gallery-title h2 {
transform: rotate(-90deg);
}
.gallery-nav {
background: blue;
}

Answer 1

只做一个转换的问题是，元素的位置和大小仍然与转换前相同，就整体布局而言。

你可以使用的是垂直文本书写方法。这不是一个转换，元素将占用尺寸:

/* Gallery Title and Nav */
.gallery-title-and-nav {
position: absolute;
background: red;
height: 60vh;
width: fit-content;
top: 50%;
left: 0;
transform: translate(0, -50%);
overflow: hidden;
color: white;
display: flex;
flex-direction: row;
align-items: center;
flex-basis: auto
}
.gallery-title {
background: green;
height: fit-content;
width: fit-content;
}
.gallery-title h2 {
transform: rotate(180deg);
writing-mode: vertical-lr;
}
.gallery-nav {
background: blue;
}

<!-- Gallery Title and Nav-->
<div class="gallery-title-and-nav">
<!-- Gallery title -->
<div class="gallery-title">
<h2>GALLERY</h2>
</div>
<!-- gallery pciker -->
<div class="gallery-nav">
<h4>POSTER</h4>
<h4>INFOGRAPHICS</h4>
<h4>MAGAZINE 01</h4>
<h4>MAGAZINE 02</h4>
</div>
</div>

Answer 2

mdn web docs告诉我们，

transform CSS属性允许您旋转，缩放，倾斜或转换元素。它修改CSS可视格式模型的坐标空间。

这意味着，你的变换只在视觉上旋转，但容器预测它，如果文本从未旋转，仍然是水平的

解决方案不是旋转它的父元素(.gallery-title)，子元素(s)也将被旋转

/* Gallery Title and Nav */
.gallery-title-and-nav {
position: absolute;
background: red;
height: 60vh;
width: fit-content;
top: 50%;
left: 0;
transform: translate(0, -50%);
overflow: hidden;
color: white;
display: flex;
flex-direction: row;
align-items: center;
flex-basis: auto
}
.gallery-title {
background: green;
height: fit-content;
width: fit-content;
}
.gallery-title{/*I HAVE CHANGED*/
transform: rotate(-90deg);
}
.gallery-nav {
background: blue;
}

<!-- Gallery Title and Nav-->
<div class="gallery-title-and-nav">
<!-- Gallery title -->
<div class="gallery-title">
<h2>GALLERY</h2>
</div>
<!-- gallery pciker -->
<div class="gallery-nav">
<h4>POSTER</h4>
<h4>INFOGRAPHICS</h4>
<h4>MAGAZINE 01</h4>
<h4>MAGAZINE 02</h4>
</div>
</div>

其他问题

• 由于文本是h2(标题)，它有一些边距，
  解决方案:.gallery-title h2{ margin:0; }
• 在.gallery-title-and-nav中，height: 60vh;相对于窗口，它产生了一些问题
  解决方案:height:200px;/*or anything else with unit px*/或height:fit-content,fit内容是最好的，我在下面的代码
中使用它

最终应答码:

/* Gallery Title and Nav */
.gallery-title-and-nav {
position: absolute;
background: red;
height: fit-content;/*CHANGED*/
width: fit-content;
top: 50%;
left: 0;
transform: translate(0, -50%);
overflow: hidden;
color: white;
display: flex;
flex-direction: row;
align-items: center;
flex-basis: auto
}
.gallery-title {
background: green;
height: fit-content;
width: fit-content;
}
.gallery-title{/*I HAVE CHANGED*/
transform: rotate(-90deg);
}
.gallery-nav {
background: blue;
}
.gallery-title h2{/*I HAVE ADDED*/
margin:0;
}

<!-- Gallery Title and Nav-->
<div class="gallery-title-and-nav">
<!-- Gallery title -->
<div class="gallery-title">
<h2>GALLERY</h2>
</div>
<!-- gallery pciker -->
<div class="gallery-nav">
<h4>POSTER</h4>
<h4>INFOGRAPHICS</h4>
<h4>MAGAZINE 01</h4>
<h4>MAGAZINE 02</h4>
</div>
</div>