为什么这些 div 不并排显示？答案

【问题标题】：why aren't these divs displayed side-by-side?为什么这些 div 不并排显示？
【发布时间】：2017-03-24 05:28:04
【问题描述】：

我创建了以下 UI 组件作为图例：

    <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

【问题讨论】：

标签： html css sass less

【解决方案1】：

MapKeys 的子 div 显示在内联块中。正是您在 MapKeys (width:260px;) 上设置的宽度导致第二个子元素中断到另一行

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

【讨论】：

【解决方案2】：

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

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

【讨论】：