gpt4 book ai didi

html - 在另一个内部旋转 div 元素

转载 作者:行者123 更新时间:2023-11-28 13:20:26 25 4
gpt4 key购买 nike

我为您准备了一个 fiddle 来说明我的问题是什么:

我需要将放置在 div 标签内的一些文本转换为垂直显示。到目前为止没问题。

http://jsfiddle.net/pSDLY/

HTML:

<div class="board">
<div class="boardheading">
<div class="verticalText">AVeryLongLongLongLongWord</div>
</div>
<div class="boardelement">
Some larger content here<br>
Some larger content here<br>
Some larger content here<br>
</div>
</div>

相关CSS:

div .boardheading {
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 5px;
border-style: solid;
overflow: visible;
background: blue;
/*See here: I want to have a fixed width and an automatically calculated height*/
width: 20px;
}

div .verticalText {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}

但是可以看到,div的高度并没有根据他的内容进行调整。宽度也不行。我希望宽度尽可能小(20px 应该是适合我的尺寸,但设置宽度没有任何效果,正如您在 fiddle 中看到的那样)

关于如何实现这一点有什么想法吗?

最佳答案

这应该让您朝着正确的方向前进。

div .verticalText {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
background: blue;
padding: 5px;
border-style: solid;
}

关于html - 在另一个内部旋转 div 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14674104/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com