帶CSS的垂直文本和div塊

在我的網站的儀表板頁面上，我嘗試創建帶有垂直文本標記的不同背景顏色的節塊。與此相似的jsfiddle這裏：http://jsfiddle.net/afpn2y19/4/帶CSS的垂直文本和div塊

<div id="outer"> 
    <div id="inner"> 
     //Rotate? I'm totally lost. 
    </div> 
</div>

我與現在具有色塊從那裏垂直文本結束到頁面的另一側延長工作問題。

理想情況下，我希望垂直標籤和相應的文本塊的樣式在用戶調整窗口大小或者動態地將更多文本填充到顏色塊中時不會完全毀壞。

喜歡的東西，這是我想要的到底達到什麼：你的問題 http://i.stack.imgur.com/n8y1K.png

來源

2016-08-18 jamesdoe

我不是100％清楚。如果你的問題是，它打破調整大小等，如果position: absolute作品在你的佈局，這個工作對我來說：

.rotate { 
    position: absolute; // Changed. 
    transform: translateX(0%) translateY(190%) rotate(-90deg); 
    float: left; 
    width: 50px; 
    font-size: 25px; 
} 

.right { 
    float: left; 
    background-color: lightgray; 
    height: 300px; 
    width: 90%; 
    margin-left: 50px; // Changed. Width of .rotate 
}

來源

2016-08-18 23:53:15 Zenny

這裏是爲我工作的解決方案：它看起來像

.rotate { 
position: absolute; 
transform: translateX(0%) translateY(190%) rotate(-90deg); 
float: left; 
width: 50px; 
font-size: 25px; 
} 

.right { 
float: left; 
background-color: grey; 
margin-left: 50px; 
width: 100%; 
} 

#outer { 
overflow: hidden; 
background-color: lightgrey; 
margin-top: 10px; 
}

來源

2016-08-19 00:04:55 jamesdoe

問題在於你的寬度和浮動不能很好地協同工作。這是一個有點用百分比，以達到預期的效果，我相信你的編輯正在尋找：http://jsfiddle.net/xownzsyo/22/

.wrap{ 
    background-color: darkgray; 
} 

.left{ 
    float:left; 
    width:15%; 
} 

.rotate { 
transform: translateX(0%) translateY(190%) rotate(-90deg); 
font-size: 25px; 
} 

.right { 
    height: 300px; 
    width:85%; 
    float:left; 
    overflow-y:scroll; 
    background-color: lightgray; 
} 

.right p{ 
    padding: 0 20px; 
}

你可能要考慮使用的引導來實現，而不過多標記和CSS響應更好列。

來源

2016-08-19 00:07:42 seguraMode

帶CSS的垂直文本和div塊

回答

相關問題