0

灰色の背景（本体）に固定幅の白い<div>を取得しようとしていますが、すべてが灰色で表示されます。白は無視されます。コードはjsbinにあります。何か案は？私は以前のウェブサイトでこれをしました、そしてそこにすべてが桃色でした。ここでやっていることと何の違いもわかりません。


PS：Firefoxが共有ポップアップからクリップボードへのコピーを拒否したため、jsbin URLを書き留めて、ここに手動で入力する必要がありました。これも以前は機能していました:-(

4

4 に答える 4

2

コンテナとサイドバーは浮いたままですが、「クリア」されていません。あなたがすることはdivを追加することです

<div class="clearBoth"></div>

サイドバーdivの後。

そしてあなたのCSSで：

.clearBoth {
   clear:both;
}
于 2013-01-31T17:57:25.657 に答える
1

フロートはそれを台無しにしています。 それは山車によって引き起こされます:-)

その中のすべてが浮いているので、基本的#containerに寸法はありません。寸法なし=背景が表示されない

に追加overflow: autoすること#containerは、問題を解決する1つの方法です（レイアウト全体をどのように表示するかによって異なります）。

于 2013-01-31T17:56:32.193 に答える
0

問題は、仕様により、含まれているDIVがドキュメントのフローから削除されることです。このため、準拠しているブラウザでは、コンテナdivは空であると見なされます。

スタイルシートの下部に次のコードを配置します。

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

次に、次のようにコンテナに変更を加えます。

<div id="container" class="clearfix">
于 2013-01-31T17:56:12.617 に答える
0 
 body {
background-color: #CCCCCC;
font-family: Verdana,Geneva,sans-serif;
font-size: 12px;
text-align: center;}

#container {
background-color: #FFFFFF;
display: inline-block;
margin: 0 auto;
text-align: left;
width: 400px; }

これらの変更を試してください

于 2013-01-31T17:51:06.023 に答える