为什么这些div不是并排显示的？

Question

我已经创建其用作一个图例以下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; 
     } 
    } 
} 

我期待这些div显示侧由端B/C母体的div和孩子的div是全部用display：inline-block定义。我怎么可以更新我的代码，使这些UI组件与具有相同和高度相似，这显示？：

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

Answer 1

他们的孩子MapKeys div的是直列block..It显示器就是这样的宽度导致该第二子元件打破到另一行

为了说明调整的MapKeys宽度2600px codepen here

Answer 2

因为父元素具有相同的宽度为c;：你上MapKeys（260px宽度）设定hild项目。

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