100%高度块与垂直文本
spa*_*tar 14 html css vertical-text css3 css-transforms
我有一个可变高度的块,我想在其中放置另一个具有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>
您可以看到内部块的计算宽度与旋转前的文本宽度相同.
更新:
这是我最终想要得到的图片:
它是一个水平条纹,其左侧堆叠有物品,并带有垂直标题块.条纹的高度是可变的,因此项目应该适应,标题的文本应保持居中.
0b1*_*011 24
我相信你只是使用a,<table>因为它似乎是实现你所寻找的最简单的方法,所以我把它从等式中删除并使用语义HTML代替.如果还有其他原因,我提前道歉,您应该能够将样式移植到使用<table>代替.
请参阅jsFiddle演示以查看正在运行的代码.或者,继续编写代码:
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和有它的width设置2em(值line-height的<h1>).然后,<h1>垂直对齐(top:0;bottom:0;height:2em;margin:auto;[ 2em也来自line-height]).一旦<h1>垂直对齐,它就会在其左侧中间逆时针旋转90度.为了使其<h1>再次可见,它被50%垂直平移(将其水平拉回到屏幕上)和-50%水平(垂直对齐).是的,措辞是正确的 - 一旦旋转[ - ] 90度,一切都会让人感到困惑;)
陷阱
- 只支持静态"高度"
<h1>.在这种情况下,仅支持1行. - 包装是不行的(我是在这个例子实际上是禁用),因此任何不适合在
height的.wrapper将被隐藏.
- 结果只是删除`margin:auto;`会做到这一点,并且要垂直改变定位,你可以调整`margin-top/bottom`属性. (2认同)
- @Nightfirecat,实际上,最好是:删除`bottom:0;`和`margin:auto;`,将`transform-origin`改为`0 0`,并将`transform`改为`rotate(-90deg)翻译(-100%,0)`for .wrapper header h1`.参见[top-aligned example](http://jsfiddle.net/hKp7f/2/).要将它对齐到底部,做同样的事情,除了删除`top:0;`而不是`bottom:0;`.请参阅[底部对齐示例](http://jsfiddle.net/hKp7f/3/). (2认同)