我正在尝试让纯 HTML 文本垂直旋转并与水平 HTML 文本对齐。
这是我想要做的示例图片。有人可以告诉我如何做到这一点吗？
【问题讨论】：
我已经尝试过让这样的事情发挥作用。在 jsFiddle 查看结果。
我正在使用容器div，即set to scale while keeping its height relative to its width using this approach。
在这个容器div 内，我已将所有div 设置为绝对定位。为了获得旋转的div 的正确位置，我首先将它们设置为粘在左下角，将它们的transform-origin 设置为0 0，然后使用transform: rotate(-90deg); 旋转它们-90 度，然后我通过设置left 属性，将第二个旋转的div 移动了一点。
我使用em's 进行定位，以确保div's 的位置根据其字体大小而变化。
我正在使用一个名为 FitText 的 jQuery 插件来调整 div 的 font-size 属性。
我使用transform: scale(); 拉伸了div 的一些内容。
您会发现需要稍微调整FitText 插件设置、div 的top 和left 属性的em 值以及缩放以使您的文本适合。但是一旦你做对了，它会在改变容器的宽度时很好地缩放div。
如果你想改变容器的纵横比，你必须创建自己的具有正确纵横比的透明图像。
HTML
<div>
<div class="container">
<div>ABCDEFGHIJKLMNO</div>
<div>ABCDEF</div>
<div>ABCDEFGHIJKLMNO</div>
<div>HELLO</div>
<div>QRSTUVWXWZABC</div>
<div>DEFGHIJKL</div>
</div>
<img src="https://dl.dropboxusercontent.com/u/6928212/threebytwo.png" />
</div>
CSS
html, body {
width:100%;
height: 100%;
font-family:"Arial Black", "Arial Bold", Gadget, sans-serif;
}
body > div {
position: relative;
}
img {
display: block;
width: 100%;
}
div.container {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
border: 1px dashed black;
overflow: hidden;
}
div.container > div {
width: 100%;
position: absolute;
line-height: 1em;
background-color: #FFF;
}
div.container > div:nth-child(even) {
-webkit-transform:rotate(-90deg);
-webkit-transform-origin: 0 0;
transform:rotate(-90deg);
transform-origin: 0 0;
-moz-transform:rotate(-90deg);
-moz-transform-origin: 0 0;
bottom: -1em;
}
div.container > div:nth-child(odd) {
z-index: 1;
}
div:nth-child(3) {
top: 1.1em;
left: 1.6em;
}
div.container > div:nth-child(4) {
left: 1em;
}
div.container > div:nth-child(5) {
-webkit-transform: scale(1, 2);
-moz-transform: scale(1, 2);
transform: scale(1, 2);
top: 2.8em;
left: 3.8em;
}
div.container > div:last-child {
-webkit-transform: rotate(0deg) scale(1, 2);
-moz-transform: rotate(0deg) scale(1, 2);
transform: rotate(0deg) scale(1, 2);
top: 2.3em;
left: 2.3em;
}
JS
$(function () {
$("div.container > div:nth-child(1)").fitText(1.15);
$("div.container > div:nth-child(2)").fitText(0.8);
$("div.container > div:nth-child(3)").fitText(1.31);
$("div.container > div:nth-child(4)").fitText(0.75);
$("div.container > div:nth-child(5)").fitText(1.46);
$("div.container > div:nth-child(6)").fitText(0.9);
})
【讨论】：
这里我做了一个例子：
<!doctype html>
<html>
<head>
<style type="text/css">.vertical{
width: 0px;
word-wrap: break-word;color:grey;float:left;margin-left:10px;}
.horizontal{float:left;margin-left:10px;}
</style>
</head>
<body>
<div class="horizontal">l e t t e r s</div><br>
<div class="vertical">abc</div>
<div class="horizontal">l e t t e r s</div><br>
<div class="vertical">abc</div>
<div class="horizontal">l e t t e r s</div><br>
<div class="vertical">abc</div>
<div class="horizontal">l e t t e r s</div>
</body>
</html>
【讨论】：