我有一个可变高度的 block ，我想在其中放置另一个具有 100% 高度和垂直文本(从下到上方向)的 block ，并将其堆叠到外部 block 的左侧。有没有一种方法可以通过 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>
可以看到内部 block 的计算宽度与旋转前的文本宽度相同。
更新:
这是我最终想要得到的图片:
它是一个水平条纹，元素堆叠在其左侧，并带有一个垂直标题 block 。 Stripe 的高度是可变的，因此元素应该适应并且标题的文本应该保持居中。
最佳答案
我相信您只使用了 <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 的高度并且有它的 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将被隐藏。
关于html - 带有垂直文本的 100% 高度 block ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10843380/