javascript - 使用填充在 div 中定位垂直旋转的文本

Question

一旦旋转，我已经看到了位置文本的各种正确解决方案，但我似乎无法解决我在这里遇到的问题。

在这里您可以看到问题... http://thetally.efinancialnews.com/tallyassets/20years/index.html

我已经旋转了深色 div 中的段落，但 div 仍然占据了未旋转段落的宽度。我不想在这些 div 上设置固定宽度，因为某些段落会比其他段落大。有没有一种方法可以使这些 div 仅与段落一样大，并带有一些填充？

.fact {
    position:relative;
    padding:20px;
    background:rgba(0,0,0,0.6);
    color:white;
}

.fact.event {

}

.fact p {

    -webkit-transform: rotate(-90deg);
    -webkit-transform-origin: top right;   
    -moz-transform: rotate(-90deg);
    -moz-transform-origin: top right; 
    -o-transform: rotate(-90deg);
    -o-transform-origin: top right; 
    -ms-transform: rotate(-90deg);
    -ms-transform-origin: top right; 
    transform: rotate(-90deg);
    transform-origin: top right;  
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Answer 1

你需要在旋转之前为两个容器设置宽度和高度，因为元素在流中仍然使用相同的空间，它们只在屏幕上移动。 (就像相对 + 坐标)。

一些CSS组成的例子

/* part of the CSS made up */

.fact {
  position: relative;
  width: 2em;
  color: white;
}
.cover { 
  width: 250px;
}
events {.
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 400px;
  text-align: center;
}
.event {
  display: inline-block;
  /* fall back if no flex available */
  height:100%;
  vertical-align:top;
}
.fact p {
  text-align: center;
  margin:0;
  background: rgba(0, 0, 0, 0.6);
  -webkit-transform: rotate(-90deg) translatex(-99%);
  transform: rotate(-90deg) translatex(-99%);
  -webkit-transform-origin: top left;
  transform-origin: top left;
  /* Internet Explorer */
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3);
  box-shadow: 0 0 0 1px red;
  /* SHOW IT TO ME */
  width: 400px;
  /* == eventually little less than height of container */
  line-height: 2em;
  /* == width of container, okay for 1 single line */
}

img {
  width:100%;
  height: calc(100% - 3em);

}

<div class="events">
  <div class="event event1 year1996 fact">
    <p>March,4,First edition of Financial News published,,fact,</p>
  </div>
  <div class="event event2 year1996 cover">
    <a href="images/covers/004_Square Mile.pdf" target="_blank">
      <img src="view-source:http://thetally.efinancialnews.com/tallyassets/20years/images/covers/004_Square%20Mile.jpg">
    </a>
    <p>March,25,,,cover,004_Square Mile</p>
  </div>
  <div class="event event3 year1997 fact">
    <p>April,5,Another on here to compare,no description,fact,</p>
  </div>
</div>