0

私は2つのcssファイルを使用しています[ここの流体幅サイト用][1]：1つは、特定の幅より下の場合、左側のナビゲーションが「display：none」です。

右側のナビゲーション（バナー付き）をmax-width：348pxとpadding-left：20pxに設定しています。

＃main-content divをパーセンテージ幅に設定すると、問題が発生します。ウィンドウが縮小されると、サイズが正しく変更されず、右のナビゲーションの下にドロップダウンします。それは本当に意味がないので、それを実行するための最良の方法がどのようになっているのかわかりません。

＃main-content div内には、左にフロートする＃left-navと#middle divがあり、max-widthsとpaddingを指定しました。

ウィンドウが特定の幅を下回ったら、display：noneで左側のナビゲーションを削除しますが、それまでは＃main-contentの幅を流動的にしたいと思います。

リストアイテムが1行に収まるようにするには、左側のナビゲーションも特定の幅にする必要があります。

誰かが助けてくれることを願っています。おそらく単純なことですが、機能させることはできません。

これがCSSです：

.right-nav {
  padding:0 0 0 20px;
  margin:0;float:right;
  width:348px;
}
#main-content {
  border: 1px solid #e3e3e3;
  border-botom:0;
  box-shadow: 0px -1px 18px #e0e0e0;
  margin-top:-2px;
  position:relative;
  z-index:1;
  float:left;
  width:70.2%;
  background-color:#fff;
  height:100%;
  float:left;
  padding:30px 0 0;
  -webkit-border-top-right-radius: 8px;
  -moz-border-radius-topright: 8px;
  border-top-right-radius: 8px;
}
#left-nav {
  float:left;
  width:20.5%;
  padding:15px 0 5px 20px;
  background-color:#fff;
  color:#888;
  height:100%;
  margin:0;
}
#middle {
  width:72.3%;
  background-color:#fff;
  height:100%;
  float:left;
  margin:0 21px 5px;
}

エラーページ：ここ

4

1 に答える 1

1

これは、＃middle要素のマージンと関係があります。幅はパーセンテージですが、マージンは絶対値です。

例を挙げると、画面サイズを#main-content824px幅に縮小すると、次のようになります。

#left-nav：20.5％=168.92pxとパディング-左=20px;

#middle：72.3％=595.72pxプラスマージン=42px（両側21px）

合計=828pxであるため、＃middleは＃left-navの下にドロップダウンする必要があります

つまり、パーセンテージを下げるか、マージンをパーセンテージにするか、これらの小さい幅に新しい@media画面スタイルを追加する場合です。

*コメントに基づいて編集します。

これも同じことです。.right-nav要素の幅は348pxに固定されて#main-contentおり、最大幅は67％ですが、両側に絶対パディングが20pxあります。

したがって、全体#content-wrapperの幅が1069pxの場合、次のようになります。

.right-nav：348px

#main-content= 716px; パディング：40px（左20pxと右20px）。

合計=1104pxで、＃main-contentがドロップダウンします。問題を引き起こしているのは、relative（％s）とabsolute（pixels）の組み合わせです。

于 2012-07-29T13:48:55.080 に答える