div를 확장 할 때 어떻게 띄우는가?

Question

동적 가로 너비 막대를 만들려고합니다. 배경은 투명한 png이므로 겹칠 수 없습니다. 하나는 왼쪽에, 다른 하나는 동적 폭 중간에 걸쳐 반복하고 다른 하나는 오른쪽으로 이동합니다. 여기

.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> 

그래서 주요 문제는 오른쪽 폭에 맞게 가로 질러 .MID 모든 방법을 확장하고 ... 내가 지금까지 무엇을 좀입니다 : 100 % 작동하지 않습니다.

.left 및 .mid div와 겹치는 콘텐츠가있는 경우 다른 문제가 있습니다. 다른 div를 설정하고 Z- 색인을 사용 하시겠습니까?

감사합니다.

Answer 1

A List Apart : In Search of the Holy Grail에서이 작업을 시작하는 좋은 방법이 있습니다. 기본 아이디어는 .left 및 .right에 맞게 크기가 맞는 .mid 패딩을 제공 한 다음 음수 여백과 같은 일부 위치 지정 트릭을 사용하여 .left 및 .right을 제자리에 배치하는 것입니다.