0

ここに示すようなページレイアウトがあります... http://jsfiddle.net/k55DE/

必要なのは、画面の幅に関係なく、2つのピンクの列の左端が常に整列することです。サイドバーコンテナの幅は常に300pxで、

助けてくれてありがとう

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Example</title>
    </head>
    <body>

    <div id="toolbar">
        <div id="nav">NAVIGATION</div>
        <div id="search">SEARCH</div>
    </div>
    <div id="site">
        <div id="content">CONTENT</div>
        <div id="sidebar">SIDEBAR</div>
    </div>

    </body>
</html>​

-

#toolbar {
    margin-bottom:10px;
    overflow:auto;
}

#toolbar #nav,
#toolbar #search {
    float:left;
}

#toolbar #nav {
    background-color:#ddffdd;
    min-height:30px;
    text-align:right;
    width:66%;
}

#toolbar #search {
    background-color:#ffdddd;
    min-height:50px;
    width:34%;
}



#site {
    margin:0 auto;
    overflow:auto;
    width:800px;
}

#site #content,
#site #sidebar {
    float:left;
    min-height:300px;
}

#site #content {
    background-color:#ddffdd;
    text-align:right;
    width:70%;
}

#site #sidebar {
    background-color:#ffdddd;
    width:30%;
}
​
4

1 に答える 1

0

これを解決する最も簡単な方法は、緑色の領域の右側が常に一列に並ぶようにすることです。理論的には、これは緑の領域を常に同じサイズにすることで実現できます。残念ながら、上の緑の領域にはパーセンテージ幅 (66%) があり、下の緑の領域には明示的な幅 (800px の 70% または ~560px) があるため、これは他の方法よりもはるかに困難です。ああ、下の緑色の領域が中央にあります。

下部の「コンテンツ」領域が中央に配置されているため (margin-left と margin-right は自動)、左側の余白は、ブラウザー ウィンドウのサイズに基づいて一定量になります。(およそ (ブラウザ幅 - 800)/2) この値は、レンダリング時のブラウザの幅に依存するため、純粋な CSS ではこの量を決定することはできず、JavaScript を使用してこれらを強制的に並べる必要があります。

Javascript は次のことを行う必要があります。

  1. 左余白の幅 (ブラウザーの幅 - 800px)/2 をおよそ決定します。
  2. 上部の緑の部分の幅をマージン幅(1で計算)+800pxに設定します。上部のピンク色の部分を設定して、残りを横方向に塗りつぶします。
  3. ウィンドウのサイズ変更アクションにリスナーを追加し、ウィンドウのサイズが変更されるたびに上記の 1 と 2 を繰り返します。

下部が中央に配置されていない場合、または上部にも同じ中央揃え/サイズ変更が適用されている場合、これはすべてはるかに簡単になります。その後、純粋な CSS ソリューションを適用できます。

于 2012-07-02T14:53:22.463 に答える