1

上部に水平方向のナビゲーション バーがあります。このナビゲーション バーはページの中央に配置され、幅は固定されていません。

以下に、トップ ナビゲーションの幅に近づく最大幅を取得するコンテンツ ボックスを示します。これも中央に配置されます。

ここで、コンテンツの左側に別のナビゲーション ボックスが必要です (固定幅にすることもできますが、固定幅にすることはできません) が、コンテンツは中央に配置されます (ナビゲーションとコンテンツの両方を含むボックスではありません)。

センターの問題 http://img688.imageshack.us/img688/4306/problemcenter.png

したがって、コードは次のようになります。

<nav id="main-navigation"></nav>
<nav id="sidenav"></nav>
<section id="content"></section>

何か案は？

4

3 に答える 3

1

もしよろしければ、次のことをお勧めしたいと思います。

  1. 上記の要素をコンテナーでラップします。
  2. position:relativeこの新しいコンテナに適用します。
  3. 次に#sidenavposition:absoluteに適用します。
  4. 最後に、#sidenavを適用right:100% して配置します。

そして、あなたはそれを持っています！あとは、それに応じてスタイルを設定するだけです。

これは、実際の例のフィドルです。

于 2012-08-23T18:28:04.157 に答える
1

このデモをご覧ください。

#sidenavは、その親が である絶対位置に配置され#contentます。

于 2012-08-23T18:30:50.230 に答える
0

これはあなたが探しているものかもしれません:フィドル!

于 2012-08-23T18:29:39.133 に答える