Question

这是CSS游乐场：https://www.bootply.com/HHeQ3n0EbT

<div class="container">
                <div class="row">
                    <div class="col ltg-column-parent">
                        Column
                        <div class="ltg-column-inside">
                            <div class="task-box">
                                content
                            </div>
                          <div class="task-box">
                                content
                            </div>
                          <div class="task-box">
                                content
                            </div>
                        </div>
                        <div class="task-table-bottom-buttons">
                            <button>+</button>
                        </div>

                    </div>
                  <div class="col ltg-column-parent">
                        Column
                        <div class="ltg-column-inside">
                            <div class="task-box">
                                content
                            </div>
                        </div>
                        <div class="task-table-bottom-buttons">
                            <button>+</button>
                        </div>

                    </div>
                  <div class="col ltg-column-parent">
                        Column
                        <div class="ltg-column-inside">
                            <div class="task-box">
                                content
                            </div>
                        </div>
                        <div class="task-table-bottom-buttons">
                            <button>+</button>
                        </div>

                    </div>
                </div>
            </div>

CSS：

.ltg-column-parent {
    margin: 1px;
    padding: 0;
    background-color: lightgray;
    padding-bottom: 1rem;
}

.ltg-column-inside {
    background-color: rgb(151, 151, 151);
    height: 100%;
    /* border: white solid 1px; */
}

.task-box {
    width: 10rem;
    height: 6rem;
    color: black; 
    background-color: white;
    border: 1px solid lightgray;
    border-left: 7px solid yellow;
    padding-left: 1rem;
    padding-top: 1rem;
    display: inline-block;
}

.task-table-bottom-buttons {
    position: relative;
    bottom: 0px;
}

我正在制作某种看板桌，您可以在其中创建任务（带有黄色边框的白框）并将它们拖放到列之间。

列是一个lightgray背景的框。
Darkgray div是我可以放置/拖动任务框的地方

现在，这里有一些问题。 Darkgray包装盒带有＆＃34; +＆＃34;按钮正在其父级lightgray div之外移动。这是因为darkgray div设置为height: 100%，因为我希望它占据列中的所有可用空间。如果我删除它，那么darkgray div会缩小，而且列可以放置任务的空间更小。

我想完成一些事情：

列必须具有相同的高度如果它们彼此相邻（如果屏幕较小且列位于下方，则不需要相同的高度）
＆＃34; +＆＃34;按钮必须粘贴到最后一个任务的底部（如果更容易，则粘贴整个列）
darkgray div应该尽可能大，不要人为地追逐列的高度（因为用户必须有放置任务的地方）。

我该怎么做才能让它看起来正确？

Answer 1

此解决方案适用于我：

.ltg-column-inside {
    background-color: rgb(151, 151, 151);
    border: white solid 1px;
    display: flex;
    overflow: auto;
    height: auto;

}

Answer 2

将dispaly:flex用于.ltg-column-inside

.ltg-column-inside{
dispaly:flex
}

如果您不希望灰色部分删除：

.task-box{
    height: 6rem;
}

使列具有相同的高度，同时占用所有可用空间的对象

2 个答案: