CSS转换属性问题 - 不能调整背景颜色

我想创建一个左边的文本框与从上到下旋转，但不能处理背景的宽度，背景色显示额外的但当我减少宽度，高度也越来越小，下面是我创建的代码的JSFiddle。CSS转换属性问题 - 不能调整背景颜色

文本也应该从顶部宽度开始，不应该显示额外的。

HTML代码是

<div class="box"> 
    <span>Vertical Text</span> 
</div>

而且CSS是

.box { 
    position: relative; 
    width: 100%; 
    float: left; 
    border: 2px solid #444; 
    min-height: 150px; 
    box-sizing: border-box; 
} 
.box > span { 
    position: absolute; 
    left: 0; 
    top: 0; 
    background: #f00; 
    color: #fff; 
    width: 150px; 
    min-height: 150px; 
    font-size: 14px; 
    font-family: arial; 
    transform: rotate(-90deg); 
}

结果我期待作为连接下面

来源

2016-07-07 Sanjeev Kumar

不清楚你在问什么。期望的结果是什么？ –

@Marcos我刚刚更新了我在寻找的 –

例JsFiddle box-sizing: border-box;是为溢出

text-aling: right;将设置文本的原因顶部

.box { 
 
    position: relative; 
 
    width: 100%; 
 
    float: left; 
 
    border: 2px solid #444; 
 
    min-height: 150px; 
 
} 
 

 
.box > div { 
 
    text-align: right; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    padding: 0; 
 
    margin: 0; 
 
    background: #f00; 
 
    color: #fff; 
 
    width: 20px; 
 
    min-height: 150px; 
 
    font-size: 14px; 
 
    font-family: arial; 
 
    transform: rotate(); 
 
} 
 

 
.box > div > p { 
 
    transform: rotate(-90deg); 
 
}

<div class="box"> 
 
    <div> 
 
    <p>Text</p> 
 
    </div> 
 
</div>

来源

2016-07-07 08:09:28

似乎没问题，但跨度的宽度如何，额外的宽度不应该在那里，实际上我想保持跨度宽度最小，因为宽度是从左侧开始的，同样从右侧。 –

请检查更新的问题与我已附加的图像是我正在寻找 –

编辑帖子。现在应该工作 –

您是因为border: 2px solid #444财产面临这样的问题，因为它占用的2px从总量为150px绘制div的边框的宽度。所以对于<span>实际面积宽度为150px - (2px + 2px) = 146px（两边边框为2px）

如果设置

.box > span 
{ 
    text-align:right; 
    width: 146px; 
    min-height: 146px; 
}

这将解决该问题。

来源

2016-07-07 08:13:50 RajatPatel

我建议删除'.box {box-sizing：border-box;}'。如果你删除了框的大小，你不需要玩宽度/高度。 –

同意，但如果由于UI限制div不能超过150px，则可以应用此解决方案。 – RajatPatel

@RajatPatel请看我更新的问题，图片显示我在找什么 –

试试这个，

.box > span::before{ 
    content:''; 
    position:relative; 
    margin-left:70px; 
}

来源

2016-07-07 08:40:24 frnt

文字对齐是已经建议@Loori已经 –

@SanjeevK这就是它如何工作，或者你必须包装你的跨文本在另一个div再加一个div。 – frnt

@SanjeevK尝试我更新的代码。这工作没有包装到div。 – frnt

CSS转换属性问题 - 不能调整背景颜色

回答

相关问题