0

希望どおりに div を配置できません。これが私が望むレイアウトのスキーマです。

http://cl.ly/1q2s0k283A3M2u2N1b0D [編集済み]

赤い部分が問題です。ウィンドウの左側のサイドバーから右側の境界線に移動したい。

どのようにできるのか ？

4

4 に答える 4

0

左側のバー（メニューの1つ？）の幅は固定されていると思います。そのため、実際の例を次に示します。

#header {
    width: 100%;
    height: 40px;
    background: blue;
}
#content{
    height: 300px;
    width: 100%;
}
#left_bar {
    float: left;
    margin-left: 20px;
    width: 100px;
    height: 100%;
    background: green;
}
#right_bar {
    margin-left: 120px;
    height: 100%;
    background: yellow;
}
#header_right {
    width: 100%;
    height: 30px;
    background: red;
}
<body>
<div id="header">
</div>
<div id="content">
    <div id="left_bar">
    </div>
    <div id="right_bar">
        <div id="header_right">
        </div>
    </div>
</div>

于 2012-05-29T19:06:02.907 に答える
0

絶対測位で何でも可能！

jsFiddle

最後のプロパティを変更することで、ブラウザウィンドウの左側とサイドバーの間に必要な空白の量を指定できます。

#sidebar,
#red {
    left:20px; /* change this to anything, change to 0 if none is desired  */
}​
于 2012-05-29T19:13:45.287 に答える
0

いくつかのコード： http： //jsfiddle.net/zZqaM/3/。

固定幅のコンテナを作成します。内部には、固定幅と。のバーがありますfloat: left;。次に、内側にも、div右に浮かぶコンテンツと、塗りつぶしコンテンツのdiv幅を持つヘッダーがあります。

于 2012-05-29T18:54:32.763 に答える
0

これはまったく異なる方法であるため、編集するのではなく、新しい回答を作成することにしました。

jsフィドル

重要な要素:

  • #dummy純粋に装飾的な目的で、メニュー バーの背景色をブラウザー ウィンドウの右側に拡張するダミー要素 ( ) があります。
  • #sidebarブラウザ ウィンドウの下部まで拡張されるように絶対に配置されます。
  • #sidebar、#content、および #menuは、固定幅の #container 内にあり、margin:0 auto適用されるため、ブラウザー内で常に中央に配置されます。
于 2012-05-29T20:28:28.903 に答える