如何在浮动时扩展div？

Question

我想创建一个动态水平宽度的酒吧。背景是透明的PNG，所以它们不能重叠。我有一个用于左侧，一个用于在动态宽度中间重复-x，然后是另一个用于右侧的bg。这里是有点儿什么我迄今为止...

.bar{ 
width: 100%; 
overflow: hidden; 
} 

.left{ 
width: 50px; 
height: 50px; 
float: left; 
} 

.mid{ 
height: 50px; 
float: left; 
} 

.right{ 
width: 50px; 
height: 50px; 
float: right; 
} 

<div class="bar"> 
    <div class="left"></div> 
    <div class="mid"></div> 
    <div class="right"></div> 
</div> 

所以主要问题是延伸跨过的。中期一路遇到合适的，宽度：100％不起作用。

其他问题是我能做些什么，如果我的内容需要重叠.left和.mid divs？设置另一个div并使用z-index？

非常感谢！

Answer 1

有一篇很好的文章让你开始如何在A List Apart上做到这一点：In Search of the Holy Grail。基本的想法是，你给.mid填充大小适合.left和.right，然后使用一些定位技巧，如负边距将.left和.right移动到位。