Pourquoi mes divisions côte à côte défilent-elles sur différents niveaux?

Question

J'ai mis en place un système de divs de défilement côte à côte (code ci-dessous). Cependant, chaque fois qu'ils contiennent un contenu différent, ils apparaissent à différents niveaux (comme le montre l'image ci-dessous). Je ne suis pas très sûr de ce qui se passe et j'ai le sentiment que cela a quelque chose à voir avec l'attribut CSS display. Le code est inclus. Ce projet utilise Bootstrap. Les crochets de mon code proviennent de mon CMS. Il embarque automatiquement le contenu. est ici un jsFiddle représentant: https://jsfiddle.net/d8jopwnr/

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

Code Mon Sass (à mon avis, il est plus facile à comprendre que CSS normal Si vous n'êtes pas d'accord, vous pouvez traduire en 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

Si vous ajoutez une petite ligne de code au .col-md-4 pour définir le vertical-align: top puis la première boîte s'aligne sur le haut du conteneur avec le reste.

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