DIV顯示inline-block的工作不正常對於這種情況

Question

我已經創建的div和SCSS以下部件：

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

<div id="MapKeys"> 
    <div id="RegionalSupply"> 
    <div>Regional supply</div> 
    <div class="circle"></div> 
    <div class="display inlineBlock">Circles sized by the amount of change from the previous period</div> 
    </div> 
</div> 

#MapKeys 
{ 
    .circle 
    { 
     width: 20px; 
     height: 20px; 
     background: lightgrey; 
     -moz-border-radius: 10px; 
     -webkit-border-radius: 10px; 
     border-radius: 10px; 
     display:inline-block; 
    } 

    .display 
    { 
     &.inlineBlock{ display: inline-block } 
    } 

    #RegionalSupply{ 

      height:100px; 
      width:220px; 
      border:solid purple 1px; 
     display:inline-block; 
     padding:10px; 
    } 
} 

• 的第一行是標題
• 第二行從一個小圓圈開始，用作符號
• 第三行描述圓圈符號的上下文

我的意圖是讓第三行上的文本顯示在第二行的圓旁邊。第2行和第3行的div的css顯示被設置爲內聯塊。因此，我期望第三行的文本div將直接顯示在第二行的圓上的div的右側。有什麼想法可能在這裏？

Answer 1

您需要將width設置爲.display .inlineBlock，以便它適合在容器內。

http://codepen.io/anon/pen/GWygPX

Answer 2

使用width: calc(100% - 20px);上的文本，並刪除這些2個元素之間的空格在HTML所以他們會適應在同一行。

#MapKeys .circle { 
 
    width: 20px; 
 
    height: 20px; 
 
    background: lightgrey; 
 
    -moz-border-radius: 10px; 
 
    -webkit-border-radius: 10px; 
 
    border-radius: 10px; 
 
    display: inline-block; 
 
} 
 
#MapKeys .display.inlineBlock { 
 
    display: inline-block; 
 
    width: calc(100% - 20px); 
 
} 
 
#MapKeys #RegionalSupply { 
 
    height: 100px; 
 
    width: 220px; 
 
    border: solid purple 1px; 
 
    display: inline-block; 
 
    padding: 10px; 
 
}

<div id="MapKeys"> 
 
    <div id="RegionalSupply"> 
 
    <div>Regional supply</div> 
 
    <div class="circle"></div><div class="display inlineBlock">Circles sized by the amount of change from the previous period</div> 
 
    </div> 
 
</div>