侧边栏填写

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上测试过它。