为什么这些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显示在内联块中。它只是在MapKeys（宽度：260px;）上设置的宽度导致第二个子元素断开到另一个子元素线

举例说明将MapKeys的宽度调整为2600px codepen here

Answer 2

因为父元素的宽度与子项相同。

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