Repeat-x無法正常工作-css

我有一個repeat-x問題。我的CSS代碼是這樣的：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重複一次，然後留下空的空間。

來源

2012-06-07 Nikolai Cekov

你是什麼意思與 '是重複一次' ？ – bjornruysen

'#header_content {width：32px; }' - 看起來很窄。 – thirtydot

你能提供截圖嗎？如果沒有原始圖像，幾乎不可能看到這些症狀... – BenM

也許你的意思是repeat-y，看着HTML元素的尺寸。

來源

2012-06-07 13:52:35 BenM

如果我理解正確，你的錯誤是由差距獲得的中央和右側的塊之間的錯誤。您可以通過設置右側塊float: left或更改中央塊的寬度來解決此問題。

jsfiddle - 我的例子與您的錯誤。

jsfiddle - 與float: left

jsfiddle修復 - 與中心塊的確切大小固定

來源

2012-06-07 14:18:24 Xella

這是問題！[1] [1]：http://i.stack.imgur.com/mo0JW.png header_c.png重複一次，並有空的地方。 –

你可以顯示你的代碼？ – Xella

你的中心塊的寬度是32px。您將顯示中央塊寬度相同（32px）的屏幕。嘗試改變中央塊的寬度，你會看到整個塊如何header_c.png瓷磚 – Xella

可能是你應該嘗試這種

#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-07 14:45:20

Repeat-x無法正常工作-css

回答

相關問題