0

私はこのサイトで約 35 分間検索しましたが、それは本当に単純な答えであり、おそらく見過ごしていると確信していますが、レイアウトを中央に配置する方法を理解するのに苦労しています.

シンプルなレイアウトで、コンテナ div、メニュー用の左 div、およびコンテンツ用の右 div があります。（これまでのCSSはこちらです..）

#container {
  text-align:center; 
  width: 960px; 
  background-color:#FFFFFF; 
  margin-right:10px; 
  margin-left:10px; 
  display:block;
}
#left {
  text-align:; 
  width:300px; 
  display:block; 
  background-color:#FFFFFF; 
  padding-left:5px; 
  padding-right:5px;
}
#right {
  text-align:left; 
  padding-left:10px; 
  padding-right:10px; 
  width:620px; 
  display:block;
}

保存してブラウザで開くと、レイアウトが左側に配置されています。中央に移動するには何を追加できますか?

他の人のスレッドからいくつかのことを試しましたが、何も機能していません。私は何を間違っていますか？

4

5 に答える 5

0

これの核心は margin: 0 auto; です。親divで。

box-sizing: border-box; を調べると、多くの時間と労力を節約できます。px の代わりにパーセンテージと ems を使い始めます。私を信じて。ときどき境界線以外にピクセルを持っている人を雇うことはありません。さらに、はるかに簡単です。また、javascript および非常に特殊な状況では、ID (#) のみを使用することをお勧めします。.class に固執することが現在のコンセンサスです。幸運を！

http://jsfiddle.net/sheriffderek/CN8Ev/

HTML

<div class="container">

    <div class="main">main</div>

    <div class="sub">sub</div>

</div> <!-- .container -->

CSS

*, *:before, *:after {
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* google border box - moves padding to the inside of the box */ 
}

.container {
    width: 90%;
    max-width: 60em;
    margin: 0 auto; /* no margin on the top and bottom - auto margin on the sides */
    overflow: hidden; /* shame - google micro clear fix instead */
}

.main {
    width: 70%;
    float: left;
}

.sub {
    width: 30%;
    float: left;
}
于 2013-08-06T01:13:24.230 に答える
0

それらの列にフロートを与えてみてください。

例えば

#left {
  float:left;
}
#right {
  float:right;
}

または、お互いに平らに座りたい場合は、両方を浮かせてください。

http://codepen.io/alexbaulch/pen/hzwnE

于 2013-08-05T22:15:26.583 に答える
0

を使った素敵なトリックがありmargin: 0 autoます。このサイトまたはこのサイト
を チェックして、主題の適切な説明を確認してください。

于 2013-08-05T21:45:06.690 に答える