为什么我在不同层面上并排滚动div？

我已经设置了并排滚动div的系统（代码如下）。但是，每当内容数量不同时，它们就会出现在不同的级别上（如下图所示）。我不太确定发生了什么，我有一种感觉，它与CSS display属性有关。代码包含在内。这个项目使用Bootstrap。我的代码中的括号来自我的CMS。它会自动嵌入内容。这里有一个典型的jsfiddle：https://jsfiddle.net/d8jopwnr/为什么我在不同层面上并排滚动div？

我的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; 
}

来源

2017-08-14 Ben Cooper

如果您将一行代码添加到.col-md-4以设置vertical-align: top，则第一个框将与其余的容器顶部对齐。

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

来源

2017-08-15 17:58:13

为什么我在不同层面上并排滚动div？

回答

相关问题