CSS旋转格创建顶部空白 [英] Css rotate div creates white space on top

问题描述

我有旋转从垂直到水平的div。问题是，当我旋转产生的顶部空间大。我想，当旋转的股利将在顶部堆叠。我怎样才能做到这一点的图像尺寸，我有作为背景是宽756×高1250

I have a div that I rotate from vertical to horizontal. The problem is that when I rotate it creates big space at the top. I want when rotate the div be stacked on the top. How can I achieve this the image size that I have as background is width 756 x height 1250

.body
{
    width:756px;
    min-height:1250px;
    border-color:White;
    border-style:solid;
    border-width:thin;
    float:right;
    margin:0 auto;
    background-image:url("Images/bg.jpg");
    background-repeat:no-repeat;
      -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);

}

<div class="body">
<div >
<div ><h2 style="font-size:20px;"><div style="width:540px; margin-top:520px; margin-left:110px;   ">
     <asp:Label ID="lblNtitle" runat="server" 
         Text="" style="color: #000000" CssClass="style3"></asp:Label><br /><br /> 
     <asp:Label ID="lblNCompany" runat="server" Text="" CssClass="style3"> </asp:Label></div></h2></div>

    

推荐答案

从我可以收集你需要切换最小高度和宽度值，因为在div现在旋转垂直而非水平。这需要照顾的白色空间的朝向页面顶部。下面是一个例子 http://jsfiddle.net/fDWkr/1/

From what I can gather you needed to switch the min-height and the width values because the div is now rotated vertically rather than horizontal. That takes care of the white space towards the top of the page. Here is an example http://jsfiddle.net/fDWkr/1/

修改

width:756px;
min-height:1250px;

要

width:1250px;
min-height:756px;

这篇关于CSS旋转格创建顶部空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！