我有一个可变高度的块,其中我想放置另一个具有100％高度和垂直文本(从底部到顶部方向)的块,并将其堆叠到外部块的左侧.有没有办法使用CSS转换来实现它,但在JS中没有宽度和高度计算？
这是我到目前为止可以得到的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
.block1 {
border: 4px solid #888;
height: 120px;
width: 200px;
}
.block2 {
height: 100%;
border: 4px solid red;
}
.msg {
display: inline-block;
white-space: nowrap;
font-family: Verdana;
font-size: 14pt;
-moz-transform: rotate(-90deg);
-moz-transform-origin: center center;
-webkit-transform: rotate(-90deg);
-webkit-transform-origin: center center;
-ms-transform: rotate(-90deg);
-ms-transform-origin: center center;
}
</style>
</head>
<body>
<div class="block1">
<table class="block2">
<tr>
<td>
<div class="msg">Hi there!</div>
</td>
</tr>
</table>
</div>
</body>
</html>
您可以看到内部块的计算宽度与旋转之前的文本宽度相同.
更新：
这是我想要得到的结局的图片：
解决方法
我相信你只使用< table>因为它似乎是实现你想要的最简单的方法,所以我把它从方程式中删除,并使用语义HTML.如果有其他原因,我提前道歉,您应该可以将样式移植到使用< table>代替.
请参阅jsFiddle demo查看代码.或者,继续执行代码：
HTML
<section class="wrapper">
<header><h1>Test</h1></header>
<article>Text.</article><!--
--><article>More text.</article><!--
--><article>Photos of cats.</article><!--
--><article>More photos of cats.</article>
</section>
CSS
.wrapper {
margin:1em;
position:relative;
padding-left:2em; /* line-height of .wrapper div:first-child span */
background:#fed;
}
.wrapper header {
display:block;
position:absolute;
top:0;
left:0;
bottom:0;
width:2em; /* line-height of .wrapper div:first-child span */
overflow:hidden;
white-space:nowrap;
}
.wrapper header h1 {
-moz-transform-origin:0 50%;
-moz-transform:rotate(-90deg) translate(-50%,50%);
-webkit-transform-origin:0 50%;
-webkit-transform:rotate(-90deg) translate(-50%,50%);
-o-transform-origin:0 50%;
-o-transform:rotate(-90deg) translate(-50%,50%);
-ms-transform-origin:0 50%;
-ms-transform:rotate(-90deg) translate(-50%,50%);
transform-origin:0 50%;
transform:rotate(-90deg) translate(-50%,50%);
position:absolute;
top:0;
bottom:0;
height:2em; /* line-height of .wrapper div:first-child span */
margin:auto;
font-weight:bold;
font-size:1em;
line-height:2em; /* Copy to other locations */
}
.wrapper article {
display:inline-block;
width:25%;
padding:1em 1em 1em 0;
vertical-align:middle;
-moz-Box-sizing:border-Box;
-webkit-Box-sizing:border-Box;
-ms-Box-sizing:border-Box;
-o-Box-sizing:border-Box;
Box-sizing:border-Box;
}
怎么运行的
< header>设置为.wrapper的高度,并将其宽度设置为2em(< h1>的line-height的值).然后,< h1>垂直对齐(顶部：0;底部：0; height：2em; margin：auto; [2em也来自line-height]).一旦< h1>垂直对齐,在左侧中间逆时针旋转90度.为了使< h1>再次看到,它被垂直翻译50％(水平地将其拉回到屏幕上),并且水平地-50％(垂直对齐).是的,措辞是正确的 – 一旦你旋转[ – ] 90度,一切都会变得混乱;)
陷阱
>< h1>仅支持静态“height”.在这种情况下,只支持1行.> Wrapping将不起作用(我在本例中实际上禁用了它),所以任何不符合.wrapper高度的东西都将被隐藏.
