側邊欄填寫

Question

我搜索過這個到處都是可用的空間，但我似乎無法找到解決的辦法;也許這很簡單，但我沒有看到它。我的頁面頂部有一個橫幅，中間有一個徽標。在這個標誌的左邊和右邊，我需要兩個（不同的）x重複的背景圖片。像這樣：

<div class="banner_container"> 
    <div class="banner_right"></div> 
    <div class="banner_logo"></div> 
    <div class="banner_left"></div> 
</div> 

所有我預先知道的風格是：

div.banner_container { 
    height: 60px; 
    width: 100%; 
    text-align:center; 
} 
div.banner_right { 
    height: 60px; 
    float:right; 
    background: url(img/banner_right.png) repeat; /* This is a */ 
} 
div.banner_left { 
    height: 60px; 
    float:left; 
    background: url(img/banner_left.png) repeat; 
} 
div.banner_logo { 
    height: 60px; 
    width: 500px; 
    margin: 0px auto; 
    background: url(img/banner.png) no-repeat center; 
} 

我需要的標誌在中央和左，右部分去填補留下的所有剩餘空間和正確。我怎麼能做到這一點？

Answer 1

只是想指出另一種解決方案，利用位置絕對http://jsfiddle.net/Khez/yVhsY/，因爲我不喜歡一般採用浮動。

有多種方式來處理這種要求。

Answer 2

將這樣的事情是爲您的需求可接受的解決辦法？ http://jsfiddle.net/8BqH4/

我只在Mac上的Firefox 3.6和Chrome 10上測試過它。