html - 将 div 像标尺一样放在左侧和顶部 w/jsfiddle.net

Question

我在实现此架构时遇到问题：

这是一个jsfiddle：http: //jsfiddle.net/ptCoder/3WB32/

“Bar 2”需要垂直旋转：

transform: rotate(90deg);
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Safari and Chrome */

谁能帮我？

谢谢你。

Answer 1

你可以一起捏造这样的东西 DEMO http://jsfiddle.net/kevinPHPkevin/3WB32/5/

<div class="container">
    <div id="hbar">Bar 1</div>
    <div id="vbar">Bar 2</div>
    <canvas id="c" width="400px" height="400px">CANVAS</canvas>
</div>

Answer 2

下面是我建立的一种自定义方法，对我个人来说这样做更有意义。您可以通过单击底部的示例来查看它的功能/外观。

的HTML：

<div id="wrapper">
    <div id="bar-1">
        <p>Bar 1</p>
    </div>
    <div id="bar-2">
        <p>Bar 2</p>
    </div>
    <div id="canvas">
        This is the canvas
    </div>
</div>

CSS：

#wrapper{
    min-height: 500px;
    position: relative;
    background: #ccc;
}
#bar-1{
    position: absolute;
    left: 100px;
    right: 100px;
    background: blue;
    height: 100px;
}
#bar-2{
    position: absolute;
    top: 100px;
    background: red;
    bottom: 100px;
    width: 100px;
}
#canvas{
    position: absolute;
    top:100px;
    left: 100px;
    background: yellow;
    bottom: 100px;
    right: 100px;

}

单击此处查看上述代码的工作示例：

Answer 3

您为两个 div 提供相同的课程

<div id="hbar" class="hbar">Bar 1</div>
<div id="vbar" class="hbar">Bar 2</div>

将第二个更改为vbar