水平自動填充中間重複div

我基本上有三個div。水平自動填充中間重複div

<div id="headerLeft"></div> 
<div id="headerMiddle"></div> 
<div id="headerRight"></div>

用下面的CSS

#headerLeft 
{ 
background-image: url("topLeft.png"); 
height: 88px; 
width: 329px; 
float:left; 
} 
#headerMiddle 
{ 
background-image: url("topMiddleRepeat.png"); 
background-repeat:repeat-x; 
position:relative; 
height: 73px; 
float:left; 
color: white; 
min-width:100px;  
padding-top: 15px; 
} 
#headerRight 
{ 
background-image: url("topRight.png"); 
float: left; 
height: 87px; 
width: 47px; 
float:right; 
}

我需要的中間股利水平重複填補了頭的空間的其餘部分。我無法手動設置div的寬度，因爲此html將被插入到其他未知寬度的頁面中。

我試着將寬度設置爲100％，但是這只是填滿整行，並將中間頁眉和右側頁眉推到中間頁眉上方。

這是我目前正在操作的頁面。 http://dl.dropbox.com/u/1501628/web/ipiphony.html

任何幫助將不勝感激。

來源

2011-07-05 DaR

您的語法對於#headerMiddle不正確。它應該是後臺重複的：repeat-x;而不是'x-repeat'。 – Dan

@丹恩謝謝。我更新了語法，但我原來的問題仍然存在:( – DaR

您是否嘗試了下面的一些解決方案？ – Dan

你正在試圖做到這一點，我不認爲這是可能的方式，我會做的是這樣的：

<div id="header"> 
    <div id="headerLeft"></div> 
    <div id="headerMiddle"></div> 
    <div id="headerRight"></div> 
</div>

而CSS

#header { 
    background-image: url("topMiddleRepeat.png"); /* In the container */ 
    background-repeat: repeat-x; 
    height: 88px; /* the height of your images */ 
} 
#headerLeft { 
    background-image: url("topLeft.png"); 
    height: 88px; 
    width: 329px; 
    float:left; 
} 
#headerMiddle { 
    height: 73px; 
    float:left; 
    color: white; 
    min-width:100px;  
    padding-top: 15px; 
} 
#headerRight { 
    background-image: url("topRight.png"); 
    float: left; 
    height: 87px; 
    width: 47px; 
    float:right; 
}

這樣，你的背景將覆蓋標題。另一種選擇是嵌套div並設置背景以填充一側，併爲兩側使用填充。

<div id="header"> 
    <div id="headerLeft"> 
     <div id="headerRight">Your text here</div> 
    </div> 
</div>

而CSS

#header { 
    background-image: url("topMiddleRepeat.png"); /* In the container */ 
    background-repeat: repeat-x; 
    height: 88px; /* the height of your images */ 
} 
#headerLeft { 
    background-image: url("topLeft.png"); 
    height: 88px; 
    padding-left: 329px; 
} 
#headerRight { 
    background-image: url("topRight.png"); 
    height: 87px; 
    padding-right: 47px; 
}

來源

2011-07-05 01:52:37 ramono

嘗試以下操作：

更新以下樣式：

#header { 
position: relative; 
overflow: hidden; 
min-height: 85px; 
} 

#headerLeft { 
background-image: url("topLeft.png"); 
height: 88px; 
width: 329px; 
position: absolute; 
left: 0; 
top: 0; 
} 

#headerMiddle { 
background-image: url("topMiddleRepeat.png"); 
height: 73px; 
color: white; 
padding-top: 15px; 
margin-left: 329px; 
margin-right: 47px; 
} 

#headerText { 
position: absolute; 
left: 260px; 
font-size: 20px; 
font-weight: bold; 
} 

#headerRight { 
background-image: url("topRight.png"); 
height: 87px; 
width: 47px; 
position: absolute; 
right: 0; 
top: 0; 
}

如果還有問題，我建議你上載的樣式和HTML到jsfiddle.net，所以每個人都可以有一個積極的發揮。

來源

2011-07-05 01:53:26 Dan

水平自動填充中間重複div

回答

相關問題