2

すべてのコンテンツを保持する 1 つのメイン div を持つ HTML ページを作成するとします。div は他の div を保持し、画像のようにページの中央に固定する必要があります。

幅はどのように指定すればよいですか？% 値または値でpx?ベスト プラクティスは何ですか? そして、正しい値は何ですか？これが以前にカバーされていたら申し訳ありません....

画像はこちら：ここに画像の説明を入力

編集 とてもいい答えです...どうもありがとうございました

4

6 に答える 6

0

それはすべて、提示するコンテンツと、それで何をしたいかによって異なります。コンテンツを拡張する必要がない場合、またはテキスト/デザインを DIV の幅内に制限したい場合は、固定幅レイアウトの使用を選択できます。ただし、考慮すべきことの 1 つは、パーセンテージと固定幅の組み合わせを使用することです。たとえば、最小幅が 700 ピクセルを下回らず、最大幅が 950 ピクセルを超えない限り、ページの 95% を DIV に選択できます。この結果は、指定した制約内で拡大および縮小する DIV です。

div#container { 
    width:95%; 
    max-width: 950px; 
    min-width: 700px; 
    margin: 0 auto 0 auto; 
}
于 2013-04-26T13:07:58.830 に答える
0

div を中央に配置するには、左右のマージンをautocss に配置します。

% または px に関しては、コーディングするレイアウトに大きく依存します。レイアウトが流動的なレイアウトで考えて作成された場合は、 を使用する必要がありますが、それを超えないように%追加する必要があります。max-widthn px

例えば：

レイアウトは、960px グリッドを使用して 1024px 画面用に作成されました。ただし、1280px の画面を使用するユーザー向けに少し伸ばすとよいでしょう。したがってwidth:100%;、ir の後に andを置きますmax-width:1280px。

したがって、より大きな画面を使用しているユーザーには、1280px のレイアウトが表示されます。

于 2013-04-26T12:56:10.150 に答える
0

bodymargin:0を使用し、margin auto でコンテナー div を使用し、コンテンツの幅と高さにピクセルを使用することをお勧めします。

<div class="container">

        <!-- HTML Content here -->
 </div>

.container{
   margin-right: auto;
   margin-left: auto;
}

Css float left と right は、div のフローを制御します。左右に 2 つの div を配置する場合は、

.left-div {
   float: left;
   width:200px // use pixel to control width
   margin-left: 5px;
 }
.right-div {
   float: right;
   width:200px;
   margin-right: 5px;
 }
于 2013-04-26T12:57:37.837 に答える
0

私の意見では、使用する必要がありますpx

％はユーザーのワイドスクリーンに依存するため、画像が正しく表示されない可能性があります

于 2013-04-26T12:52:49.983 に答える
0

あなたの画像は見えませんが、パーセンテージを使用して 2 つの div でそれを行うことができます。

HTML:

<div id="outer">  
   <div id="inner">Your centered div</div>
</div>

CSS:

#outer {
    width: 100%;
}

#inner {
    width: 50%; // whatever width you want - I can't see your image
    margin: 0 auto;
}
于 2013-04-26T12:53:21.443 に答える
0

最初: メイン div を中央の位置に保持するには、 を使用しmargin-left: auto; margin-right: auto;ます。

2 番目: 基本的なベスト プラクティスがあるとは思いません。変数の使いやすさはコンテンツ自体に大きく依存するためです。両方をカバーする使用可能なソリューションの 1 つは、メディア クエリを使用して、デバイス (デスクトップ、テーブル、電話) に応じて固定幅を使用することです。

于 2013-04-26T12:58:47.693 に答える