別のレベルのdivをスクロールしているのはなぜですか？

Question

私はサイドバイサイドのスクロールdivs（下のコード）のシステムをセットアップしました。ただし、コンテンツの量が異なるたびに、下の図に示すように、異なるレベルで表示されます。私は何が起こっているのかよくわからないし、CSS display属性と関係があると感じています。コードが含まれています。このプロジェクトはBootstrapを使用しています。私のコードの中の括弧は私のCMSのものです。それは自動的にコンテンツを埋め込みます。ここ は代表JSFiddleです：https://jsfiddle.net/d8jopwnr/

私のHTMLコード：

 <div class="row"> 

      <div class="col-lg-10 col-lg-offset"> 
       {exp:channel:entries channel="Constructs" limit="1"} 
       <h1>{title} <span class="header-box">{abbreviation}</span></h1> 
       <br> 
       <br> 
       <div class="container level-box"> 
        <div class="row"> 

         {if summary!=""} 
         <div class="level col-md-4"> 
          <h4>Summary</h4> 
          {summary} 


          <a href="http://www.google.com">Download ToAM° Construct Map</a> 
         </div> 
         {/if} {if level_1!=""} 
         <div class="level col-md-4 col-md-offset-1 shift-margin-level"> 
          <h4>{title} Level 1: {level_1_title}</h4> 
          {level_1} 

          <a href="www.google.com">Download ToAM° Construct Map</a> 
         </div> 
         {/if} {if level_2!=""} 
         <div class="level col-md-4 col-md-offset-1 shift-margin-level"> 
          <h4>{title} Level 2: {level_2_title}</h4> 
          {level_2} 

          <a href="www.google.com">Download ToAM° Construct Map</a> 
         </div> 
         {/if} 
         <div class="level col-md-4 col-md-offset-1 shift-margin-level"> 
          <h4>{title} Level 3: {level_3_title}</h4> 
          {if level_3!=""}{level_3}{/if} 

          <a href="www.google.com">Download ToAM° Construct Map</a> 
         </div> 
         {if level_4!=""} 
         <div class="level col-md-4 col-md-offset-1 shift-margin-level"> 
          <h4>{title} Level 4: {level_4_title}</h4> 
          {level_4} 

          <a href="www.google.com">Download ToAM° Construct Map</a> 
         </div> 
         {/if} {if level_5!=""} 
         <div class="level col-md-4 col-md-offset-1 shift-margin-level"> 
          <h4>{title} Level 5: {level_5_title}</h4> 
          {level_5} 

          <a href="www.google.com">Download ToAM° Construct Map</a> 
         </div> 
         {/if} {/exp:channel:entries} 

        </div> 

       </div> 
      </div> 
     </div> 
    </div> 

マイサスコード（私の意見では、それは通常のCSSよりも理解しやすいです、あなたが同意しない場合は、CSS hereにそれを翻訳することができます。 ）：

$header-box-vertical-padding: 3px; 
$header-box-horizontal-padding: 6px; 
$box-height: 60%; 

.header-box { 
    background-color: #0000FF; 
    color: white; 
    padding-top: $header-box-vertical-padding; 
    padding-bottom: $header-box-vertical-padding; 
    padding-right: $header-box-horizontal-padding; 
    padding-left: $header-box-horizontal-padding; 
    border-radius: 6px; 
} 

.level-box > .row { 
    overflow-x: auto; 
    white-space: nowrap; 
} 
.level-box > .row > .col-md-4 { 
    display: inline-block; 
    float: none; 
} 

.level{ 
    height: 60%; 
    border-radius: 16px; 
    width: 200px; 
    overflow-x: initial; 
    white-space: normal; 
    background-color: #0000FF; 
    color: white; 
    display: inline-block; 

} 

.shift-margin-level{ // used to adjust the spacing between levels on constucts 
    margin-left: 5% !important; 
} 


.map-display{ 
    width:100%; 
    border: lightblue solid 1px; 
    border-radius: 4px; 
    padding: 8px; 
    margin-top: 10px; 
} 

.size{ 
    font-size: 36px; 
} 

.vertical-center{ 
    display:inline-block; 
    vertical-align:middle; 
} 




// scrollbar stuff 
.level-box::-webkit-scrollbar-track 
{ 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    background-color: #F5F5F5; 
} 

.level-box::-webkit-scrollbar 
{ 
    width: 6px; 
    background-color: #F5F5F5; 
} 

.level-box::-webkit-scrollbar-thumb 
{ 
    background-color: #000000; 
} 

Answer 1

の場合.col-md-4に小さなコード行を追加してvertical-align: topに設定すると、最初のボックスはコンテナの上部に残りの部分が配置されます。

.level-box > .row > .col-md-4 { 
    vertical-align: top; 
    display: inline-block; 
    float: none; }