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设计样式，我可以添加任意数量的列并水平滚动。但是每列（我的代码中的引导程序面板）都有一个垂直位置，具体取决于项目数（我的代码中的div.deal）。因此，当使用拖放添加项目时，列向上移动，删除项目会向下移动列。

我在这个jsfiddle中有我的来源，它证明了我的问题：https://jsfiddle.net/31qxxs6r/

Answer 1

将vertical-align: top添加到您的卡片中，如下所示：

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

然后你去！请告诉我您的反馈意见。谢谢！

检查fiddle

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

1 个答案: