divでコンテンツを展開するにはどうすればよいですか?

私はこれらのプロパティを持つdivを持っています

#content {
background-image: url('img/cbg.png');
background-position: center top;
background-repeat: repeat-y;
width: 960px;
margin: auto;
padding-bottom:50px;
margin-bottom: 20px;
}

背景は70px(私は思う)のためにしか現れず、次に停止します、そしてdivの中の残りのものはちょうど普通のようにページの下に行きます。 display:inline-blockを設定すると、正しく動作しますが、私のdivはアンセンタリングされます。

0
あなたは何かをページに浮かべていますか?浮動小数点のクリア問題かもしれません。
追加された 著者 Dane O'Connor,
@TheDeenoはい、右に浮かぶコンテンツdivの右側にdivがあります。それは悪いですか?
追加された 著者 ahota,

3 答え

コンテナ内に浮動している要素がある場合、浮動小数点数が適切にクリアされていない可能性があります。これがあなたの問題ならば、 "clearfixs"と呼ばれる一連の回避策があります。

One of my favorite write-ups was here. The CSS they used in this example was here.

div.container {
    border: 1px solid #000000;
    overflow: hidden;
    width: 100%;
}

div.left {
    width: 45%;
    float: left;
}

div.right {
    width: 45%;
    float: right;
}
1
追加された
できます!ありがとう!
追加された 著者 ahota,

さて、あなたは repeat-y をしています。つまり、それは垂直方向にのみ繰り返されます。背景画像が70ピクセルの場合、それは問題をサポートします。 repeat-x または repeat のいずれかを使用します。

0
追加された
いくつかのテストの後、私は、背景画像の高さはパディングからちょうどあると結論づけました。
追加された 著者 ahota,

ブラウザウィンドウで #content の幅を 960px に設定しているため、これ以上展開されません。

画像が 70px までしか拡大しない場合は、使用した画像の実際の height である可能性があります。誤って repeat-y (縦に繰り返し)を使用しました。

background-repeat に簡単な概念を示します。

  1. 画像を縦方向に繰り返したい場合は、横方向の画像を作成します。
  2. 画像を水平方向に繰り返したい場合は、縦の高さの画像を作成します。
0
追加された