jquery - CSS 样式的列根据子元素的数量移动垂直位置

Question

对于一个新的应用程序，我想创建一行垂直滚动的列(使用 bootstrap3 设置样式)并且是放置目标(使用 jquery-ui)。

我在尝试设置此样式时相当成功，但所有列都会根据我放置在其中的可放置元素的数量向上或向下移动。

我的页面大体结构如下:

<div class="pipeline">
    <div class="panel panel-default panel-fase">
        <div class="panel-heading">
            <h3 class="panel-title">Fase 1</h3>
        </div>
        <div class="panel-body fase-deals">
            <div class="deal">
                <h4 class="deal-title">My Deal #1</h4>
            </div>
            <div class="deal">
                <h4 class="deal-title">My Deal #2</h4>
            </div>
            <div class="deal">
                <h4 class="deal-title">My Deal #3</h4>
            </div>
            <div class="deal">
                <h4 class="deal-title">My Deal #4</h4>
            </div>
        </div>
    </div>
    <div class="panel panel-default panel-fase">
        <div class="panel-heading">
            <h3 class="panel-title">Fase 2</h3>
        </div>
        <div class="panel-body fase-deals">
        </div>
    </div>
    ...

使用 CSS 设置样式是可行的，我可以添加任意数量的列并水平滚动。但是，每一列(我的代码中的 Bootstrap 面板)都有一个垂直位置，具体取决于元素的数量(我的代码中的 div.deal)。 因此，当使用拖放添加元素时，列会向上移动，删除元素会使我的列向下移动。

我在这个 jsfiddle 中有我的源代码来演示我的问题:https://jsfiddle.net/31qxxs6r/

Answer 1

像这样将 vertical-align: top 添加到您的卡片中:

.panel-fase {
    display: inline-block;
    width: 400px;
    vertical-align: top;
}

就这样吧!请让我知道您的反馈。谢谢!

检查 fiddle