0

repeat-x には 1 つの問題があります。私のcssコードはこれです：

#header {
}

#header_left {
background:url("../img/header_l.png") no-repeat;
float:left;
width:341px;
height:258px;
}

#header_content {
background:url("../img/header_c.png") repeat-x;
width:32px;
height:258px;
float:left;
}

#header_right {
background:url("../img/header_r.png") no-repeat;
float:right;
width:341px;
height:258px;
}

そしてhtmlコード：

<div id="header">
        <div id="header_left"></div>
        <div id="header_content"></div>
        <div id="header_right"></div> 
    </div>

ただし、画像 header_c.png は 1 回だけ繰り返されます。この問題を解決するにはどうすればよいですか?

スクリーンショットは次のとおりです: http://i.stack.imgur.com/mo0JW.png、 header_c.png は1回繰り返され、その後空白が残ります。

4

3 に答える 3

0

たぶんあなたはこれを試してみるべきです

#header {
margin: 0 auto;
height:auto;
width:auto;
padding:0px;
}

#header_left {
background:url("../img/header_l.png") no-repeat left top;
width:341px;
height:258px;
}

#header_content {
background:url("../img/header_c.png") repeat-x left top;
width:32px;
height:258px;
}

#header_right {
background:url("../img/header_r.png") no-repeat left top;
width:341px;
height:258px;
}
于 2012-06-07T14:45:20.160 に答える
0

おそらくrepeat-y、HTML 要素の寸法を見ることを意味していたのでしょう。

于 2012-06-07T13:52:35.850 に答える
0

私の理解が正しければ、ギャップによって得られた中央ブロックと右ブロックの間のエラーです。float: leftこれは、右側のブロックを設定するか、中央のブロックの幅を変更することで修正できます。

jsfiddle - あなたのエラーの私の例。

jsfiddle - で修正float: left

jsfiddle - センターブロックの正確なサイズで修正

于 2012-06-07T14:18:24.273 に答える