0

私が見落としているこれには、おそらく簡単な答えがあります。私のコンテンツは、メイン ページの div コンテナーにあります。水平方向に中央揃えにしたいのですが、ブラウザを縮小するとサイドメニューと重なってしまいます。例えば200pxになったら左に動かないようにしたい。

現在、幅の半分 (-350px) の負のマージンを設定し、50% の位置に配置することで中央に配置されています。

私のcssはここにあります

紙 {

position:absolute;
z-index:6;
overflow: hidden;
visibility: visible;
float: left;
left: 50%;
margin-top: 0px;
padding-top: 0;
padding-right: 0;
padding-bottom:200;
padding-left: 0;
background-color: #000;
height: 900px;
width: 700px;
margin-left: -350px;

}

どんな助けでも大歓迎です

乾杯

4

3 に答える 3

0

次を使用してコンテナーを中央に配置しmargin:0 auto;ます。絶対配置の代わりに、200px の左右のパディングを適用します。( padding: 0 200px;)。

これにより、コンテナーが中央に配置され、ブラウザー ウィンドウを最小化するときに両側に 200 ピクセルのスペースが確保されます。

于 2011-01-10T13:21:15.007 に答える
0

それを実現するには、HTML と css を作り直す必要があります。

<div id = "sidebar"></div>
<div id = "content">
    <div id = "content_inner"></div>
</div>

その新しい HTML では、新しい CSS も必要になります

#sidebar{
float:left;
width:200px;
}

#content{
padding-left:200px;
}

#content_inner{
    margin:0px auto; /* This will center your box in the parent box */
    width:700px;
}

ある時点で、デザインを手放す必要があるかもしれません。100px 幅の画面でサイトを閲覧する人を止めることはできません。ページを最小限のサイズに最適化するようにしてください (実際、ほとんどのサイトは 960 ピクセル以上のディスプレイ用に開発されています)。

ここでこれに関する詳細情報を見つけることもできるかもしれません: http://css-tricks.com/the-perfect-fluid-width-layout/

于 2011-01-10T13:21:23.677 に答える
0

この最初の部分は、CSS の問題を解決するための一般的なコメントです。firefox 用の firebug アドオンをインストールすると、ページをプレビューしているときにいつでも、css およびインライン スタイルをリアルタイムで編集して、どのプロパティが UI に好きなように影響するかを確認できます。この場合、ページをロードし、「紙」の div を調べて、パディング左、位置、マージンなどのプロパティを変更してみます。

この場合、問題はこの div がフローティングであるという事実に関連しているため、他のコンテンツと重なる可能性があります。サイド メニューもフローティング (左) である場合、他の float: left 要素と重なることはありません。また、overflow:hidden を使用しているため、通常のようにメニューの下に折り返されません。

最後に、OP では明確ではありませんが、話しているメニューが右側にある場合は、両方を float: right にします。

于 2011-01-10T13:21:29.953 に答える