如何在 jQuery UI 布局切换器中使文本垂直？

Question

我正在网站中使用 jquery-ui-layout 插件：jQuery UI Layout Hompage

选项 togglerContent_open 和 togglerContent_closed 允许您将 html 放置在切换器中。我想在我的 EAST 窗格中包含文本，但我的问题是文本在垂直切换器上水平显示，因此只能看到第一个字符。

如何显示它以使其改为垂直阅读？就像下面的任何一个（对不起，非常粗糙的模型）选项。它是 jQuery UI 布局中的一个选项还是只是 css?

编辑：有谁知道这是否可以通过修改 jQuery UI 布局设置？

Answer 1

.parentPane {
    border: 1px solid #ccc;
}

.parentPane > div {
    display:inline-block;
    height:100px;
    vertical-align:top;
    text-align:center;
}

.eastPane {
    background-color:#CA7DBD;
    width: 49.5%;
}

.westPane {
    background-color:#4679BD;
    width: 49.5%;
}

.rotator {
    background-color:#ccc;
    display:inline-block;
    margin-top: 20px;
    position:relative;
    transform: rotate(90deg);
}
.wizard1 {
    left:0;
}
.wizard2 {
    right:40px;
    ;
}
.wizard2 {
    right:40px;
    ;
}
.wizard3 {
    right:80px;
    ;
}
.wizard4 {
    right:120px;
    ;
}

<div class="parentPane">
    <div class="eastPane">East Pane</div>
    <div class="westPane"><div>West Pane</div>
        <div class="rotator wizard1">Wizard 1</div>
        <div class="rotator wizard2">Wizard 2</div>
        <div class="rotator wizard3">Wizard 3</div>
        <div class="rotator wizard4">Wizard 4</div>
    </div>
</div>

你可以利用CSS3transform属性。这将旋转文本，但对齐方式仍不会将此类容器（div's 或 span's）分开。因此，您可以使用 relative positioning 将它们并排对齐。这是您将使用 rotation.

的一般语法

transform: rotate(90deg);

利用相对定位，您可以定义多个内容之间的距离（文本是垂直的）。

请参阅以下代码段

.rotator {
    background-color:#ccc;
    display:inline-block;
    margin-top: 20px;
    position:relative;
    transform: rotate(90deg);
}

.wizard1 {
     left:0;
}

.wizard2 {
     right:40px;;
}

.wizard2 {
     right:40px;;
}

.wizard3 {
     right:80px;;
}

.wizard4 {
     right:120px;;
}

<div class="rotator wizard1">Wizard 1</div>
<div class="rotator wizard2">Wizard 2</div>
<div class="rotator wizard3">Wizard 3</div>
<div class="rotator wizard4">Wizard 4</div>

希望对您有所帮助！！！

如何在 jQuery UI 布局切换器中使文本垂直？

How to make text vertical in a jQuery UI Layout toggler?

html

css

jquery

jquery-ui-layout