100％高度块，带垂直文本 [英] 100% height block with vertical text
问题描述
我有一个可变高度的块，其中我想放置另一个具有100％高度和垂直文本（从底部到顶部方向）的块，并将其堆叠到外部块的左侧。有没有办法实现它的CSS变换，但没有在JS中的宽度和高度计算？
I have a block of a variable height in which I want to put another block with 100% height and vertical text (bottom-to-top direction) and stack it to the left side of the outer block. Is there a way to achieve it with CSS transforms but without width and height calculations in 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>
您可以看到内部块的计算宽度与旋转前的文本宽度相同。
You can see that the inner block's computed width is the same as the text width before rotation.
UPDATE：
这里是我想得到的最后的图片：
Here is the picture of what I want to get in the end:
这是一个横向条纹，其中项目堆叠在其左侧，并具有垂直标题块。
It's a horizontal stripe with items stacked to its left side, and with a vertical header block. Stripe's height is variable, so items should adapt and the header's text should remain centered.
推荐答案
我相信你只是使用一个< table> ，因为它似乎是实现你正在寻找的最简单的方法，所以我把它从方程，并使用语义HTML。如果有另一个原因，我提前道歉，你应该能够使用< table> 。
I believe you were only using a <table> because it seemed to be the easiest way to achieve what you were looking for, so I cut it out of the equation and used semantic HTML instead. If there was another reason, I apologize in advance and you should be able to port the styles over to use a <table> instead.
请参阅 jsFiddle演示查看操作中的代码。或者，继续执行代码：
See the jsFiddle demo to view the code in action. Or, continue on to the code:
<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
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 的高度，并且它的 width 设置为 2em （值 line-height >< h1> ）。然后，< h1> 垂直对齐（ top：0; bottom：0; height：2em; margin：auto; [ 2em 也来自 line-height ]）。一旦< h1> 垂直对齐，则它在其左侧的中间逆时针旋转90度。为了使< h1> 再次可见，它被垂直翻译成 50％水平）和 -50％水平（垂直对齐）。是的，措辞是正确的 - 一旦你旋转[ - ] 90度，一切只是混乱）;
How it works
The <header> is set to the height of .wrapper and has it's width set to 2em (value of line-height for the <h1>). Then, the <h1> is vertically aligned (with top:0;bottom:0;height:2em;margin:auto; [2em is also from line-height]). Once the <h1> is vertically aligned, it is rotated counter-clockwise 90 degrees by the middle of its left side. In order to make the <h1> visible again, it is translated 50% vertically (to pull it back onto the screen horizontally) and -50% horizontally (to vertically align it). And yes, the wording is correct--everything just gets confusing once you rotate by [-]90 degrees ;)
-
< h1>仅支持静态高度。 - 包装无效（在本例中我实际上已禁用它），所以任何不适合<$ c $
- Only a static "height" is supported for the
<h1>. In this case, only 1 line is supported. - Wrapping will not work (I've actually disabled it in this example), so anything that doesn't fit in the
heightof.wrapperwill be hidden.
这篇关于100％高度块，带垂直文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
