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
height
of.wrapper
will be hidden.
这篇关于100%高度块,带垂直文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!