상위 div가 겹치는 div

Question

컨테이너로 작동하는 여러 div가있는 문의하기 페이지가 있으며이 컨테이너 안에는 콘텐츠를 보유하는 div가 더 있습니다.

       <div class="divBlock"> 
            <div class="spacer10"></div> 
             <div class="centerDiv"> 
              <div> 
               <div class="divContactImg"> 
                <div class="branchHeader">Durban</div> 
                <div class="branchText">89 Joe Slovo Street</div> 
                <div class="branchText">Durban</div> 
               </div> 
               <div class="divContactImg"> 
                <div class="branchHeader">Hillbrow</div> 
                <div class="branchText">Point Building</div> 
                <div class="branchText"> StreetG</div> 
                <div class="branchText">Hillbrow</div> 
               </div> 
               <div class="divContactImg"> 
                <div class="branchHeader">Pinetown</div> 
                <div class="branchText">56 Hill Street</div> 
                <div class="branchText">Pinetown</div> 
               </div>                            
              </div>             
               </div> 
              </div> 
             </div> 
            <div class="spacer10"></div> 
           </div> 

문제는이 div의 (divContactImg)이 자신의 컨테이너 사업부 (divBlock를) 중복되어 있습니다 : 다음 페이지의 구조는 다음과 같다. CSS는 다음과 같습니다.

.centerDiv { text-align : center; max-width : 100%; height : auto; margin: 0px auto 0px auto; display: block ; } 
    .divContactImg { 
    background-image: url('Images/Contacts_Branches_BG.png'); 
    width:220px; 
    height:74px; 
    border-left: thin solid #333; 
    border-top: thin solid #333; 
    border-right: thin solid maroon; 
    border-bottom: thin solid maroon; 
    float:left; 
    text-align:left; 
    margin-left: 10px; 
    margin-top: 1px; 
    border-radius:5px; 
} 

.branchHeader { 
    font-size: 24px; 
    font-family:Arial Narrow; 
    margin-left: 10px; 
    margin-top: 5px; 
    text-transform:uppercase; 
    text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 00 #000; 

} 
.branchText { 
    font-size: 12px; 
    color:#b0b0b0; 
    margin-left: 10px; 
    text-transform:uppercase; 
    } 
    .branchHeaderOpening { 
    font-size: 24px; 
    font-family:Arial Narrow; 
    margin-left: 10px; 
    margin-top: 5px; 
    text-transform:uppercase; 
    text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 00 #000; 
    text-align:center; 
    } 

.divBlock { border-left: thin solid #333; border-right: thin solid #333; border-bottom: thin solid #333; border-radius: 0px 0px 8px 8px; 
      margin: 0px 10px 0px 10px; background: #000000;} 

나는 두 가지 모두 컨테이너 divs이지만 운이 없다. float을 꺼내면 왼쪽으로 이동 한 다음 div가 채우도록 가운데 div가 펼쳐지지만이 div가 3 개씩 표시되어야하므로 한 줄에 하나씩 표시됩니다. 대신``의 float`, 인라인 블록 :

Answer 1

제가

.divContactImg { 
    background-image: url('Images/Contacts_Branches_BG.png'); 
    width:220px; 
    height:74px; 
    border-left: thin solid #333; 
    border-top: thin solid #333; 
    border-right: thin solid maroon; 
    border-bottom: thin solid maroon; 
    /*float:left;*/ 
     display:inline-block; **/**ADD**/** 
     vertical-align:top; **/**ADD**/** 
    text-align:left; 
    margin-left: 10px; 
    margin-top: 1px; 
    border-radius:5px; 
}