Question

我希望最好使用div进行设置，而不是使用表格，并且无法弄清楚如何使用在表格中，它将接近于此：http://cssdeck.com/labs/collab/la2hdfa9

但无论是DIV和垂直文本，还是表格和垂直文本，我都无法得到合适的解决方案。垂直文本应与底部对齐

任何建议，请编辑。非常感谢你

Answer 1

你可以使用transform do rotate div，但是它应该是绝对的，然后相应地设置顶部和左边：

.verticaltext {
    transform: rotate(-90deg);
    transform-origin: right, top;
    -ms-transform: rotate(-90deg);
    -ms-transform-origin:right, top;
    -webkit-transform: rotate(-90deg);
    -webkit-transform-origin:right, top;
    position: absolute; 
    color: #ed217c;
    top: 20%;
}

.first {
    left: 20px;
 }

.second {
    left: 40px;
 }

.third {
    left: 60px;
 }

<div class="verticaltext first">
  This is a vertical text
 </div>

<div class="verticaltext second">
  This is a vertical text
 </div>

<div class="verticaltext third">
  This is a vertical text
 </div>

更新：

这也可以通过flex完成：

.header,
.footer {
  border: 1px solid black;
}

.container {
  display: flex;
  flex-flow: row nowrap;
}

.inside {
  width: 25%;
  display: inline-block;
  overflow: hidden;
  line-height: 1.5;
  min-width: 0;  
  border: 1px solid black;
}

.test {
  display: inline-block;
  white-space: nowrap;
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
}

.test:before {
  content: "";
  float: left;
  margin-top: 100%;
}

<div class="header">Header</div>

<div class="container">
  <div class="inside"><span class="test">heyyyyyyyyyy</span>
  </div>
  <div class="inside"><span class="test">heyyyyyyyyyy</span>
  </div>
  <div class="inside"><span class="test">heyyyyyyyyyy</span>
  </div>
  <div class="inside"><span class="test">heyyyyyyyyyy</span>
  </div>
  <div class="inside"><span class="test">heyyyyyyyyyy</span>
  </div>
</div>

<div class="footer">Footer</div>

多个div具有垂直文本

1 个答案: