Question

我基本上有三个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水平重复以填充标题空间的其余部分。我无法手动设置div的宽度，因为此html将插入到其他未知宽度的页面中。

我已经尝试将宽度设置为100％，但这只是填满整行，并将leftHeader推到middleHeader上方，而将rightHeader推到middleHeader下面。

这是我目前正在尝试操作的页面。 http://dl.dropbox.com/u/1501628/web/ipiphony.html

非常感谢任何帮助。

Answer 1

你试图这样做的方式我不认为这是可能的，我会做的是：

<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并将背景设置为eack one并使用填充作为边。

<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;
}

Answer 2

尝试以下方法：

更新以下样式：

#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，这样每个人都可以有一个活跃的游戏。

自动水平填充中间重复的div

2 个答案: