web-dev-qa-db-ja.com

子divを持つdivの背景色

<html>
<head>
<style type="text/css">
div
{
background-color:#ccc;
}
</style>
</head>

<body>
<div>
<div style="float: left;">This is a text inside a div element.</div>
<div style="float: right;">We are still in the div element.</div>
</div>

</body>
</html>

 Output after running this page

htmlbackground-color
11
Null Head

要素をフロートするときは、フロートした要素の幅を指定する必要があります。そうしないと、異なるブラウザー間で予期しない動作が発生する可能性があります。

このチュートリアルを確認してください 、cssでのフローティングについての良い情報があります。 [リンクが死んでいる]

基本的に、コンテナのdivにoverflow:hidden;を指定し、フロートされた要素に幅を指定すると、問題は解決します。

<div style="overflow: hidden;">
  <div style="float:left; width: 300px;">Some text</div>
  <div style="float:right; width: 300px;">Some text</div>
</div>

同様に、次のようにフローを正規化する場所に別のdivを追加できます。

<div>
  <div style="float:left; width: 300px;">Some text</div>
  <div style="float:right; width: 300px;">Some text</div>
  <div style="clear:both;"></div>
  <div>This div will be at the same place 
       as if the previous elements are not floated</div>
</div>

どちらも機能します:)

[〜＃〜]編集[〜＃〜]

私が最近頻繁に使用するもう1つの方法は、最初の要素をフロートし、margin-leftを次の要素に設定することです。例えば：

<div>
    <div style="float: left; width: 300px;">Some text</div>
    <div style="margin-left: 300px;">Some text</div>
    <div style="clear: both;"></div>
</div>

この方法の利点は、次の要素（この場合は2番目のdiv）が固定幅を必要としないことです。さらに、3番目のdiv（clear: both;）をスキップできます。オプションです。フローティングdivの高さが2番目のdivよりも長い場合は、追加しないでください。追加しないと、親divは常に2番目のdivの高さを取得します。

8
Savas Vedova

コンテナーdivをoverflow: hidden;に設定するだけです。

要素をフロートに設定すると、それらはドキュメントの通常の「フロー」内に存在しなくなります。

div { background: #ccc; overflow: hidden; }

そして、あなたもフリーハンドの円を作っていませんでした;）

6
PeeHaa

フローティング要素は、親がoverflowスタイルを使用する子を具体的に含んでいない限り、親のサイズに影響を与えません。

外側のdivの背景色は子divと同じですが、親の高さはゼロなので、背景は見えません。

4
Guffa

これは、両方のdivsがフロートされているため、含まれているdivに高さがないためです。 3番目の子divをフロートでなかったときに追加する場合は、高さを0およびclear:both背景色が表示されるはずです。

2
Gareth

表示している空白はボディパーツであり、背景色をdivに設定していますが、ボディには設定していません。それが身体の部分が空の理由です。

空の部分に色を付けるには、次のコードを追加する必要があります。

<html>
<head>
    <style type="text/css">
 div
 {
 background-color:#ccc;
 }
 body{
 background-color:#ccc;
 }
</style>
</head>

<body>
<div>
<div style="float: left;">This is a text inside a div element.</div>
<div style="float: right;">We are still in the div element.</div>
</div>

</body>
</html>

ボディスタイルの背景色を変更することで、ボディの背景色を変更できます。

1
Klab