html - 重复-x 不起作用 - css

Question

我对repeat-x 有一个问题。我的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 只重复一次。我该如何解决这个问题？

这是屏幕截图：http://i.stack.imgur.com/mo0JW.png， header_c.png 重复一次，然后留下空白空间。

Answer 1

也许您的意思是repeat-y，查看 HTML 元素的尺寸。

Answer 2

如果我理解正确，您的错误是间隙获得的中央块和右侧块之间的错误。您可以通过设置右块float: left或更改中心块的宽度来解决此问题。

jsfiddle - 我的错误示​​例。

jsfiddle - 修复float: left

jsfiddle - 修复中心块的确切大小

Answer 3

也许你应该试试这个

#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;
}