14

我有一个可变高度的块，我想在其中放置另一个具有 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>

我的测试

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

更新：

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

在此处输入图像描述

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

4

4 回答 4

25

我相信您只使用 a 是<table>因为它似乎是实现您正在寻找的最简单的方法，所以我将它从等式中剔除并改用语义 HTML。如果还有其他原因，我提前道歉，您应该能够将样式移植到使用 a<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值）。然后，垂直对齐（其中[也来自]）。一旦垂直对齐，它就会在左侧中间逆时针旋转 90 度。为了使其再次可见，它被垂直平移（将其水平拉回到屏幕上）和水平平移（垂直对齐）。是的，措辞是正确的——一旦你旋转 [-]90 度，一切都会变得混乱；）line-height<h1><h1>top:0;bottom:0;height:2em;margin:auto;2emline-height<h1><h1>50%-50%

陷阱

  • 仅支持静态“高度” <h1>。在这种情况下，仅支持 1 行。
  • 包装将不起作用（在此示例中我实际上已禁用它），因此任何不适合的height内容都.wrapper将被隐藏。
于 2012-06-06T04:35:04.653 回答
0

在更彻底地查看变换样式后，它看起来并非如此。您需要知道外层的精确高度div。

于 2012-06-02T01:06:54.347 回答
0

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

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

编辑： 已更新，因此在 FF 和 IE 中运行良好：http: //jsfiddle.net/EwgtT/2/

于 2012-06-05T17:04:00.237 回答
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>
  • 将转换切换到外部元素，
  • 然后使用宽度属性来定义页面底部的高度（当你玩它时，你实际上是在玩那里的高度。）
  • 对于旋转后可见的左侧空白空间，我使用可变宽度（高度）作为负边距。

你可以在这里看到它：http: //pastehtml.com/view/c0hl7zxci.html

于 2012-06-05T17:08:28.000 回答