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

您需要在旋转前为两个容器设置宽度和高度，因为，元素仍然在流中使用相同的空间，它们只在屏幕上移动。（就像亲戚和coordonates一样）。

编写一些css的示例

＆＃13;

$(document).ready(

  function() { 

    $("html").niceScroll();

  }

);

＆＃13;

/* 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);

}

＆＃13;

使用填充在div中垂直旋转文本

1 个答案: