Warum scrollen meine divs nebeneinander auf verschiedenen Ebenen?

Question

Ich habe ein System von nebeneinander Scroll-Divs (Code unten) eingerichtet. Wenn sie jedoch unterschiedliche Inhalte aufweisen, erscheinen sie auf verschiedenen Ebenen (wie im folgenden Bild zu sehen). Ich bin mir nicht ganz sicher, was passiert und ich habe das Gefühl, dass es etwas mit dem Attribut CSS display zu tun hat. Code ist enthalten. Dieses Projekt verwendet Bootstrap. Die Klammern in meinem Code stammen von meinem CMS. Es wird automatisch Inhalt eingebettet. Hier ist ein Vertreter JSFiddle: https://jsfiddle.net/d8jopwnr/

Mein HTML-Code:

 <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> 

My Sass Code (meiner Meinung nach, ist es einfacher als normale CSS zu verstehen, wenn Sie nicht einverstanden sind, können Sie es zu CSS übersetzen kann 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

Wenn Fügen Sie dem .col-md-4 eine kleine Codezeile hinzu, um vertical-align: top festzulegen, dann richtet sich die erste Box an der Oberseite des Containers mit dem Rest aus.

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