首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >引导和垂直文本-无法使其工作

引导和垂直文本-无法使其工作
EN

Stack Overflow用户
提问于 2015-09-21 21:22:50
回答 1查看 37关注 0票数 0

我没有任何运气与垂直文本混合引导。我也试图垂直对齐在div中的文本,一旦我得到这个工作。解释它的最好方法就是真正地展示它。这里是小提琴- https://jsfiddle.net/gx1Lb2jf/4/,你可以看到垂直文本不是向下推到div。

下面是脱手的密码:

代码语言:javascript
复制
    <div class="col-xs-12">

  <div class="col-xs-12 border-container">
      <div class="col-xs-1">
          <div class="vertical-text">dafadsf sda fd sf</div>
      </div>
    <div class="col-xs-11">
     dfg dsfgdsfsg dsfg dsfg asdf sad gsdf asdf asdf asdf asdf asdf asdf asdf alkfhads lkfjhads lkfjhsadl kfjhaslkf   dfg dsfgdsfsg dsfg dsfg asdf sad gsdf asdf asdf asdf asdf asdf asdf asdf alkfhads lkfjhads lkfjhsadl kfjhaslkf   dfg dsfgdsfsg dsfg dsfg asdf sad gsdf asdf asdf asdf asdf asdf asdf asdf alkfhads lkfjhads lkfjhsadl kfjhaslkf  dfg dsfgdsfsg dsfg dsfg asdf sad gsdf asdf asdf asdf asdf asdf asdf asdf alkfhads lkfjhads lkfjhsadl kfjhaslkf
    </div>
  </div>

</div>

.vertical-text {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  text-transform: uppercase;
}

.border-container {border:2px solid #000}
.border{border:2px solid red}
.go-right{float:right}
.go-left{float:left}
.nopad{padding:0}
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-09-22 14:06:35

根据另一个问题找到答案..。我把它改了一点,就在这里-- http://jsfiddle.net/CCMyf/274/希望它能帮到别人。

代码语言:javascript
复制
Code on fiddle page above.
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/32704774

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档