带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块

回答

相关问题