왜 이러한 div가 나란히 표시되지 않습니까?

Question

I했습니다 생성 범례 역할 다음 UI 요소 :

http://codepen.io/ac123/pen/peKgjP

<div id="MapKeys"> 
     <div id="RegionalSupply"> 
      <div class="header">Regional supply</div> 
      <div class="circle"></div> 
      <div class="spacer"></div> 
      <div class="detail">Circles sized by the amount of change from the previous period</div> 
     </div> 
     <div id="CorridorNetFlowDirection"> 
      <div class="header">Corridor net flow direction</div> 
      <div class="dottedLine1"> 
       <div class="part1"></div> 
       <div class="part2"></div> 
       <div class="part3"></div> 
      </div> 
      <div class="spacer"></div> 
      <div class="detail">Lines sized by the amount of change in net flow from the previous period</div> 
      <div class="separator"></div> 
      <div class="dottedLine2"> 
       <div class="part1"></div> 
       <div class="part2"></div> 
       <div class="part3"></div> 
      </div> 
      <div class="spacer"></div> 
      <div class="detail">Change in flow direction</div> 
     </div> 
    </div> 
</div> 

#MapKeys 
{ 
    text-align:left; 
    height:200px; 
    width:260px; 
    display:inline-block; 
    vertical-align:top; 

    .header{ 
     font-size:16px; 
     padding-bottom:6px; 
    } 

    #RegionalSupply{ 
     border:solid lightgrey 1px; 
     padding:10px; 
     display:inline-block; 

     & > .circle { 
      vertical-align:top; 
      width: 14px; 
      height: 14px; 
      background: lightgrey; 
      position:relative; 
      top:2px; 
      display:inline-block; 
      -moz-border-radius: 7px; 
      -webkit-border-radius: 7px; 
      border-radius: 7px; 
     } 

     & > .spacer { 
      width:5px;  
      display:inline-block; 
     } 

     & > .detail{ 
      width:175px; 
      font-size:12px; 
      display:inline-block; 
     } 
    } 

    #CorridorNetFlowDirection{ 

     border:solid lightgrey 1px; 
     padding:10px; 
     vertical-align:top; 
     display:inline-block; 

     & > .dottedLine1 
     { 
      font-size: 0px; 
      position:relative; 
      top:4px; 
      height:10px; 
      display:inline-block; 
      vertical-align:top; 

      & > .part1{ 
       width: 14px; 
       background: lightgrey; 
       display:inline-block; 
       height:10px; 
      } 

      & > .part2{ 
       width: 3px; 
       background: none; 
       display:inline-block; 
      height:10px; 
      } 

      & > .part3{ 
       width: 14px; 
       background: lightgrey; 
       display:inline-block; 
      height:10px; 
      } 
     } 

     & > .separator 
     { 
      height:1px; 
     }   

     & > .dottedLine2 
     { 
      font-size: 0px; 
      position:relative; 
      /*top:4px;*/ 
      display:inline-block; 

      & > .part1{ 
       width: 14px; 
       background: #077CAB; 
       display: inline-block; 
       height:10px; 
      } 

      & > .part2{ 
       width: 3px; 
       background: none; 
       display: inline-block; 
       height:10px; 
      } 

      & > .part3{ 
       width: 14px; 
       background: #077CAB; 
       display: inline-block; 
       height:10px; 
      } 
     } 

     & > .spacer { 
      width:5px;  
      display:inline-block; 
     } 

     & > .detail{ 
      width:150px; 
      font-size:12px; 
      display:inline-block; 
     } 
    } 
} 

I 상위 div가 아동 div가 인/C b를 나란히 표시하도록 이들 div가 기다리고 있었다 모두 display : inline-block으로 정의됩니다. 어떻게 이러한 UI 구성 요소가와 같은 및 이와 유사한 높이 표시하기 위해 내 코드를 업데이트 할 수있는 것은

https://www.dropbox.com/s/dhhkcx4dvczyjgx/updated-map-key.png?dl=0

Answer 1

그들은 MapKeys의 자식 div의 인라인 - block..It에 표시 할 수 있습니다 그냥 폭? : 부모 요소 (C)와 동일한 폭을 갖기 때문에 2600px codepen here

Answer 2

에 MapKeys의 폭을 조정 도시 다른 회선

에 침입 두번째 하위 요소를 일으키는;에는 MapKeys (260px 폭)에 설정된 hild 항목.

#MapKeys 
{ 
    text-align:left; 
    height:600px; /*Increase it so that div can be side by side.*/ 
    width:260px; 
}