为什么我的 div 在不同级别并排滚动？

Question

我已经建立了一个并排滚动 div 的系统（下面的代码）。但是，只要其中包含不同数量的内容，它们就会出现在不同的层次上（如下图所示）。我不太确定发生了什么，我觉得它与 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>

我的Sass代码（在我看来，它比普通的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; }

为什么我的 div 在不同级别并排滚动？

Why are my side by side scrolling divs on different levels?

html

twitter-bootstrap

sass

alignment

expressionengine