将rus之类的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;

}

Click here for a working example of the above code:

Answer 3

你给这两个div同样的课程

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

将第二个更改为vbar