0

Web ページが画面全体に表示されている場合、左右に何も含まれていない領域があります。ページを小さくすると、ページは小さくなり、実際の Web ページは移動しても中央に留まり、バーがなくなると移動が停止します。(このウェブサイトにはそれらのバーが含まれています) サイドバーの作り方を調べたのですが、見つかったリソースにはすべて消えないサイドバーやナビゲーションバーが含まれていました。(ナビゲーションバーはいらない)

4

3 に答える 3

2

あなたの質問は漠然としていますが、ほとんどの場合、コンテナにラップされた 2 列の固定幅レイアウトがあります。そのコンテナーは通常、固定幅でページの中央に配置されます。

<div id="container">
  <div id="left-column">Left Column</div>
  <div id="right-column">Right Column</div>
</div>

この場合、コンテナ div の margin:0 auto が div を中央に配置します。min-width を使用して、コンテナー div が特定のサイズを下回らないようにすることができます。これは、パーセンテージ ベースのレイアウトを使用している場合に適しています。CSS は次のようになります (わかりやすくするために、高さと色を指定していることに注意してください)。

#container {
  margin:0 auto;
  width:300px;
  min-width:300px;    
}

#left-column {
  float:left;
  background-color:green;  
  width:230px;
  height:200px;    
}

#right-column {
  float:right;
  background-color: red;
  width:70px;
  height:200px;    
}

これがデモです。

于 2012-09-26T20:57:55.617 に答える
1

ダスティン・ディアスは、この質問に対して非常に巧妙な答えを持っていましたが、彼のサイトはダウンしているようです（http://www.dustindiaz.com/centering-a-webpage/）

とにかく、このcssを体に追加することで、余分なマークアップなしでWebページを中央に配置できます。

body { 
    margin:0 auto;
    width:760px;
    /* adjust width as needed */
}

ダスティンへのすべてのクレジット。

于 2012-09-26T20:43:22.437 に答える
0

必要な機能を備えたサイトを見つけたら、ブラウザーに付属のツールを使用して、そのサイトがどのように機能するかを確認できます。たとえば、IE と Chrome では、F12 を押すと、HTML、JavaScript、CSS などのすべてが表示されます。

理解に苦しむ特定の効果がある場合は、URL をお知らせください。詳細をご案内いたします。

于 2012-09-26T20:46:12.907 に答える