-1

背景はすべての div に表示されるはずですが、表示されません。

http://jsfiddle.net/uxUqJ/1/

すべての div で背景を表示する必要があります。背景は、スタイル コンテナー div で定義されています。等。

<div id="container">
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
</div>

どうすればこれを修正できますか?

4

6 に答える 6

3

overflow:auto;CSSに追加する必要があると思います...引用符も削除しました

#content{
    width:1049px;
    overflow:auto;
    background: #000 url(http://s1.wp.com/wp-content/themes/pub/dark-wood/images/postflowerback.png) ;
}

Div には現在高さがありません...ただし、繰り返しや位置に関して背景で何をしたいですか?ここに良い参照点があります https://developer.mozilla.org/en/CSS/background

于 2012-06-08T09:29:46.727 に答える
1

heightプロパティとrepeating背景のセットを指定する必要があります。

#content{
    width:349px;
    height: 700px;
    ...
}
于 2012-06-08T09:29:54.933 に答える
1

<div style="clear:both;"></div>または、 text3 の終了後に追加することもできます。これにより、要素がフローティングされている場合でも、要素の周りにコンテナー div が引き伸ばされます。

于 2012-06-08T09:34:42.013 に答える
0

#textdivをクリアします。

次のスタイルを追加します。

#text {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

#text:after {
    content:"";
    display:table;
    clear: both;
}

デモ: http://jsfiddle.net/uxUqJ/13/

于 2012-06-08T09:32:55.710 に答える
0

要素が浮かんでいます。#contentを正常に成長させるには、ラッパー要素を閉じる前にフロートをクリアする必要があります。

この実用的なフィドルの例を参照してください!

マークアップを次のように変更します。

<div id="content">
  <div id="text">
    <div id="text_1">...</div>
    <div id="text_2">...</div>
    <div id="text_3">...</div>
    <div style="clear:both;"></div>  <!-- Add this line -->
  </div>
</div>

さらに、インライン スタイルを削除してクラスを使用することもできます。

于 2012-06-08T09:34:54.817 に答える
0

CSSをスマートな方法に変更する

 <style>#content{ display:table;
    width:1049px;

    background: url("image_src") ;


}
#text{
  display:table-row;
    width:1049px;   
    padding-left:27px;
    padding-right:28px;}

#text_1,#text_2,#text_3{ display:table-cell;


    padding-left: 40px;
    width: 278px;
}#text_3{
    padding-right:40px;
}


</style>
于 2012-06-08T09:36:18.313 に答える