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/8BqH4/

我只在Firefox 3.6和Mac上的Chrome 10上测试过它。

Answer 2

只是指出另一个解决方案，使用position absolute http://jsfiddle.net/Khez/yVhsY/，因为我通常不喜欢使用float。

有多种方法可以处理此类请求。

侧边栏填满所有可用空间

2 个答案: