Question

我无法找到解决方案：我会在图片旁边显示一个旋转的文字（标题）。

我找到了类似这样的内容：http://jsfiddle.net/hVhbp/27/等等，它对我有很大的帮助，但我的问题是像这样的解决方案不能使用更多文本而不是单词。

我该怎么做才能解决这个问题？

目前我有这样的事情：

<div class="rotatedbox">
  <div class="rotatedboxInner">
    <span class="rotatedText">test test test</span>
  </div>
</div>

和

    .rotatedboxInner {  
    display: block; 

    -webkit-transform: rotate(-90deg); 
    -moz-transform:    rotate(-90deg); 
    -ms-transform:     rotate(-90deg); 
    -o-transform:      rotate(-90deg);   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);


    }


    .rotatedbox { 

    position: absolute; 
    bottom: 0;
    top: 0; 

    left: -50; 


    /* right: 0 !important; */
    margin-left: auto !important;
    margin-right: auto !important;
    display: inline-block !important;

    /* The Images are part of a slideshow using cycles 2
    The Images/Slideshows have differnt heights */
   }

感谢您的帮助！

Answer 1

我真的希望我可以使用jquery计算图像的高度来解决问题我发布了整个代码，也许它会帮助有人使用周期2幻灯片和旋转字幕

<div class="imageWrap"> 

<script type="text/javascript">


$(window).load(function() {
var img = $("#image<?echo $post->ID;?>");
console.log(img);
$("#rotate<?echo $post->ID;?>").css({width:img.height()}); 
$("#rotate<?echo $post->ID;?>").css({top:img.height()-35}); 
}); 
</script>


<div class="rotateWrapper"> 
  <p id="rotate<?echo $post->ID;?>" class="rotate"> the caption will be here
  </p> 
</div>




<div class="cycle-slideshow auto" id="<?echo $post->ID;?>"
data-cycle-loader=true                      
data-cycle-progressive="#images<?echo $post->ID;?>"                 
 >

 <img id="image<?echo $post->ID;?>" 
 class="image" src="<? echo $bilder[$post->ID][0]; ?>" 
 data-cycle-title="<? echo $titles[$post->ID][0];?>">


<script id="images<?echo $post->ID;?>" type="text/cycle">

<? for ($i = 1; $i <= count($bilder[$post->ID]); $i++) {
echo "<img class='image' src='" .$bilder[$post->ID][$i]. "' 
data-cycle-title='" .$titles[$post->ID][$i]. "' >";

}?>


</script>
</div>

和

.imageWrap {
width: 1%;
display: table;
margin-left: auto !important;
margin-right: auto !important;

 }




.rotate {
 top:450px;  ///will be override
 width:450px;  ///will be override

 position: absolute;

-webkit-transform-origin: 0% 100%;
-moz-transform-origin:    0% 100%;
-ms-transform-origin:     0% 100%;
-o-transform-origin:      0% 100%;

-webkit-transform: rotate(-90deg); 
-moz-transform:    rotate(-90deg); 
-ms-transform:     rotate(-90deg); 
-o-transform:      rotate(-90deg);   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

 }

.rotateWrapper{

display: table-cell;
position: relative;
vertical-align: middle;
}

.rotateWrapperInner {
position: relative;
margin-top: 97px;
}

.image{
max-width: 380px!important;
height: auto;
left: auto !important; 
right: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
display: inline-block !important;
}

CSS：以div为中心旋转文本

1 个答案: