0

私は私が持っているこのサイトを持っています（非常に再開されました）：

<body>
   <div id="container">
      <!-- all html in here -->
   </div>
</body>

問題は、ページを中央に配置する必要があるということです（したがって、floatは使用できません）。

そして、本体にはbackground:#ddd、、コンテナにはbackground:#fff、

問題は、コンテナにmin-heightまたはheightをpxで設定しない限り（またはfloatを設定したが互換性がない場合）、白い背景が表示されないことです。

#containerマークアップは次のとおりです。

#contenedor{
    display: block;
    background:  white;
    width: 1024px;
    padding: 44px 2px 2px;
    position: relative; /* is relative so the margin auto works */
    margin: auto;

}

テストはここにあります：http：//jsfiddle.net/bfzWN/

4

3 に答える 3

1

overflow:auto簡単な解決策は、コンテナに追加することです（ #contenedor）：

#contenedor{
    display: block;
    background:  white;
    width: 1024px;
    padding: 44px 2px 2px;
    position: relative; /* is relative so the margin auto works */
    margin: auto;
    overflow: auto; /* ADD THIS LINE */
}

実例： http： //jsfiddle.net/bfzWN/1/

于 2012-04-27T00:11:07.263 に答える
1

クリアされていないフロートがたくさんあります。私はあなたのコンテナの後にクリアする疑似要素を追加します：

#contenedor:after {
    content:"\0020";
    display:block;
    height:0px;
    overflow:hidden;
    clear:both;
}

個人的には、@ tw16が答えた「オーバーフロー」トリックよりもこれが好きです。なぜなら、コンテナの外に何かを配置したい場合でも、それができるからです。

于 2012-04-27T00:15:13.750 に答える
0

ボディの幅を1024に設定し、中央に配置します。これにより、divをフロートさせることができます。

<body style="width: 1024px; margin: 0px auto; text-align: center;">

。

#contenedor {
 display: block;
 background:  white;
 width: 1024px;
 padding: 44px 2px 2px;
 position: relative; /* is relative so the margin auto works */
 margin: auto;
 float: left;

}

于 2012-04-27T00:09:34.297 に答える