css - 垂直堆叠多个旋转元素

Question

如何在使用旋转时垂直堆叠多个元素，而不必诉诸静态固定元素之间的间距(在我的例子中使用底部的像素宽度)？

这是我当前的 HTML 和 CSS/SASS:

HTML:

<div class="results-indicator-container">
    <div class="results-indicator-label-won">5x</div>
    <div class="results-indicator-label-lost">5x</div>
    <div class="results-indicator-label-tied">5x</div>
</div>

CSS/SASS:

.results-indicator-container {
  bottom: 51px;
  height: 59px;
  left: 167px;
  position: relative;
  width: 16px;
  font-size: 12px;
  float: left;

  .results-indicator-label {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    position: absolute;
    bottom: 0px;
  }

  .results-indicator-label-won {
    @extend .results-indicator-label;
  }

  .results-indicator-label-lost {
    @extend .results-indicator-label;
    bottom: 25px;
  }

  .results-indicator-label-tied {
    @extend .results-indicator-label;
    bottom: 50px;
  }
}

这是我的垂直堆叠元素当前的屏幕截图。

Answer 1

这是一个jsFiddle ,

请告诉我你的想法。

.results-indicator-container {
    height: 59px;
    left: 167px;
    width: 16px;
    font-size: 12px;
    float: left;
}
.results-indicator-label {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    float:left;
    clear:left;
    height:20px;
    width:20px;
    border-bottom: 1px solid #CCC;
}
.won{

}
.lost{

}
.tied{

}

<div class="results-indicator-container">
    <div class="results-indicator-label won">5x</div>
    <div class="results-indicator-label lost">5x</div>
    <div class="results-indicator-label tied">5x</div>
</div>