html - jsfiddle.net を使用して左右に定規のような div を配置します。

Question

このスキーマの実装に問題があります:

ここに jsfiddle があります: http://jsfiddle.net/ptCoder/3WB32/

「バー 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>

2番目をに変更vbar