0

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

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

切换器坏

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

需要切换器

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

4

1 回答 1

0 

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

希望这可以帮助！！！

于 2015-06-09T18:35:18.160 回答