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轉換屬性問題 - 不能調整背景顏色

回答

相關問題