带有文本的 HTML5 框架 - 不是字段集/图例答案

【问题标题】：HTML5 frame with text on side- not fieldset/legend带有文本的 HTML5 框架 - 不是字段集/图例
【发布时间】：2015-06-29 21:39:26
【问题描述】：

我正在构建一个引导程序基础站点，我正在尝试创建一个带有文本的框架，而不是左侧（请参阅在 MS Paint 中完成的附加草图）。至今无果。

我尝试使用字段集和图例，并且能够在图例中的字段集顶部创建标题，但我无法将图例旋转到我想要的一侧。此外，字段集/图例解决方案在 IE 中无法正常工作，因为图例会不受控制地四处乱飞。

因此，我想知道您是否对如何实现这一目标有任何想法。

我曾考虑将它们设置为框架和文本作为背景的一部分，但是当我上下缩放浏览器窗口时，一切看起来都非常混乱。

期待听到您的想法。提前感谢您，祝您有美好的一天。

Like to sketch-up example of what I would like my frame to looklike

【问题讨论】：

你能提供同样的jsFiddle吗？
试试吧，它可能对你有帮助。 jsfiddle.net/THE_MukulKant/jpsn2fp5

标签： jquery css html twitter-bootstrap fieldset

【解决方案1】：

试试这个Demo Here

<div class="outerDiv">
        <div class="innerDiv">Example text here</div>
    </div>

.outerDiv{ height: 300px; width: 140px; border-radius: 10px; border:2px solid green; margin: 0 auto; position: relative }

.innerDiv{
    color: green;
    font-size: 15px;
    left: -65px;
    position: absolute;
    top: 54px;  
    -webkit-transform: rotate(-90deg);  
    -moz-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg);  
    -o-transform: rotate(-90deg);   
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

【讨论】：