如何在浮動時擴展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移動到位。