3

したがって、私が達成しようとしているのは、ページの中央に div ( ) を配置し、その左側にmargin: auto auto;ナビゲーションを配置することです。div

ナビゲーションであるという考えは、divオンまたはオフに切り替えることができます（そこにある場合とない場合があります）。そこにあるかどうかにかかわらず、メインの div のセンタリングを妨げてはなりません。

以下は例です

モックアップ画像

私はいくつかのことを試しました

  • 両方の div をメイン div でラップします。メイン div を にmargin: auto auto設定してから、両方の子div を に設定しfloat: leftます。問題は、nav div が消えると、全体が左にシフトすることです。

  • 中央の divmargin: auto auto;をナビゲーション div の左に浮かせたままにしてから使用しmargin-leftますが、これはページが大きくなったり小さくなったりすると変化します。

これを行うための最良の方法で、任意のポインタをいただければ幸いです。私はテーブルを避けたいと思っていました。

JSFミドルリンク

4

2 に答える 2

2

これを試して：

あなたのhtmlで：

<body>
<div class="encasing">
    <div class="leftmenu"></div>
</div>
</body>

あなたのCSSで：

html, body
{
  width: 100%;
  height: 100%;
}

div.encasing
{
  top: 50px;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  height: 500px;
  background-color: green;
  position: relative;
}

div.leftmenu
{
  right: 100%;
  width: 10%;
  height: 300px;
  background-color: red;
  position: absolute;
}

重要な部分は次のとおりです。

  • メニューを含むブロックを中央ブロック内に配置するには
  • 中央のブロックに margin-left: auto; を持たせます。マージン右: 自動;
  • センターブロックに相対位置を持たせる
  • メニューに絶対配置を持たせる
  • メニューに権利を持たせる: 100%

ここでのアイデアは、左側のメニューがセンター ブロックの位置を使用するようにしてから、それ自体を調整することです。右: 100% は、メニューの右端をメニューの左端に配置します。

最後に、css の本当に優れたトリックは、絶対配置された要素が、最も近い相対または絶対配置された親に対して相対的に調整されることです。:)

于 2012-08-03T15:00:27.437 に答える
0

私が考えることができるいくつかの解決策：

  • ナビゲーション div には絶対配置を使用します。ウィンドウが小さすぎる場合にナビゲーション div がメイン div と重ならないように、おそらく body 要素に最小幅を指定する必要があります。
  • 3 列のレイアウト。たとえば、固定幅の 2 つの div が左右にフロートし、その間にコンテンツ div があります。left-floated div 内に、ナビゲーション div を表示します (または表示しません)。display: inline-blockまたは、 3 つの列を試してみてください。違いは、小さなウィンドウの処理方法にあります (試してみてください)。繰り返しになりますが、本文に最小幅を設定することで、望ましくない効果に対抗できます。
  • 完全固定レイアウト。理想的な画面解像度を決定し、それにすべてをハードコードします。このようにして、必要な場所にすべてを絶対配置できますが、欠点は、意図した解像度から大きく外れているものでは見栄えがよくないことです. 特にモバイル デバイスでは壊滅的な結果が見られます。クエリを使用してこれらに対抗し@media、レイアウトを他の画面解像度に調整します。

また、自分がやりたいことを実行しているサイトを見つけて、それがどのように行われたかを確認する必要があります (HTML、CSS、およびおそらく Javascript を調べます)。

于 2012-08-03T11:36:35.753 に答える