垂直堆叠多个旋转元素

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>