100％高度块与垂直文本

时间：2012-06-01 01:36:03

标签： html css css3 css-transforms vertical-text

我有一个可变高度的块，我想在其中放置另一个具有100％高度和垂直文本（从下到上方向）的块，并将其堆叠到外部块的左侧。有没有办法通过CSS转换实现它，但在JS中没有宽度和高度计算？

Sketch

这是我到目前为止所能得到的：

<!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>

My test

您可以看到内部块的计算宽度与旋转前的文本宽度相同。

更新

以下是我最终想要得到的图片：

enter image description here

它是一个水平条纹，其左侧堆叠有物品，并带有垂直标题块。条纹的高度是可变的，因此项目应该适应，标题的文本应保持居中。

4 个答案:

答案 0 :(得分：24)

我相信你只使用<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的{​​{1}}的内容都将被隐藏。

答案 1 :(得分：0)

在更彻底地查看转换样式后，它不会出现。您需要知道外部div的精确高度。

答案 2 :(得分：0)

我能想到的最好的是：http://jsfiddle.net/EwgtT/

block1的可变高度不会有问题，但是消息的可变高度是;它总是从底部开始。

修改 更新，因此它在FF和IE中运行良好：http://jsfiddle.net/EwgtT/2/

答案 3 :(得分：0)

我想出了这个：

<!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">
.block2 {
    width: 100%;
    border: 4px solid red;
}
.msg {
    display: inline-block;
    white-space: nowrap;
    font-family: Verdana;
    font-size: 14pt;
}
.block1 {
    border: 4px solid #888;
    -moz-transform: rotate(-90deg);
    -moz-transform-origin: right top;
    -webkit-transform: rotate(-90deg);
    -webkit-transform-origin: right top;
    -ms-transform: rotate(-90deg);
    -ms-transform-origin: right top;
    text-align:center;
}
</style>
</head>
<body>
    <div class="block1">
        <table class="block2">
        <tr>
            <td>
                <div class="msg">Hi there!</div>
            </td>
        </tr>
        </table>
    </div>
<style>
.block1{
width:500px;
margin-left:-500px;
}
</style>
</body>
</html>
  • 将转换切换到外部元素，
  • 然后使用width属性来定义页面底部的高度（当你玩它时，你实际上是在那里玩高度。）
  • 并且对于旋转后可见的空左侧空间，我使用可变宽度（高度）作为负边距。

您可以在此处查看：http://pastehtml.com/view/c0hl7zxci.html

相关问题
最新问题