在 CSS/JS 中排列多个 div？答案

【问题标题】：Arrange multiple divs in CSS/JS?在 CSS/JS 中排列多个 div？
【发布时间】：2019-10-30 08:55:05
【问题描述】：

目前我有这些 div 使用 MDB

    <div class="row" style="margin-top: 8em;">

            <div class="col-md-6">
                <div class="rounded-rectangle-svs card current-proj">
                    <h5 class="text-default"><b>Project 1</b></h5>
                    <div class="row" style="overflow-x:auto;">
                        <div class="col-md-8">
                            <p class="">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
                        </div>
                        <div class="col-md-4 text-center">
                            <h1 class="text-default"><b>86%</b></h1>
                        </div>
                    </div>
                </div>
                <div class="rounded-rectangle-svs card current-proj">
                    <h5 class="text-primary"><b>Project 2</b></h5>
                    <div class="row" style="overflow-x:auto;">
                        <div class="col-md-8">
                            <p class="">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
                        </div>
                        <div class="col-md-4 text-center">
                            <h1 class="text-primary"><b>86%</b></h1>
                        </div>
                    </div>
                </div>
                <div class="rounded-rectangle-svs card current-proj">
                    <h5 class="text-secondary"><b>Project 3</b></h5>
                    <div class="row" style="overflow-x:auto;">
                        <div class="col-md-8">
                            <p class="">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
                        </div>
                        <div class="col-md-4 text-center">
                            <h1 class="text-secondary"><b>86%</b></h1>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="rounded-rectangle-svs card current-proj">
                    <h5 class="text-success"><b>Project 4</b></h5>
                    <div class="row" style="overflow-x:auto;">
                        <div class="col-md-8">
                            <p class="">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
                        </div>
                        <div class="col-md-4 text-center">
                            <h1 class="text-success"><b>86%</b></h1>
                        </div>
                    </div>
                </div>
                <div class="rounded-rectangle-svs card current-proj">
                    <h5 class="text-danger"><b>Project 5</b></h5>
                    <div class="row" style="overflow-x:auto;">
                        <div class="col-md-8">
                            <p class="">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
                        </div>
                        <div class="col-md-4 text-center">
                            <h1 class="text-danger"><b>86%</b></h1>
                        </div>
                    </div>
                </div>
                <div class="rounded-rectangle-svs card current-proj">
                    <h5 class="text-warning"><b>Project 6</b></h5>
                    <div class="row" style="overflow-x:auto;">
                        <div class="col-md-8">
                            <p class="">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
                        </div>
                        <div class="col-md-4 text-center">
                            <h1 class="text-warning"><b>86%</b></h1>
                        </div>
                    </div>
                </div>
            </div>
    </div>

而这些div的输出是这样的

如您所见，col-md-6 类名的 2 个不同 div 位于 row div 内。

每个 col-md-6 包含 3 个不同的项目。

我正在尝试做什么，是否可以在不使用 col-md-6 的情况下安排这些项目的 div？只有JavaScript？也有这样的安排？

因为这些项目将来自我的数据库，所以在这种情况下使用 col-md-6 是个坏主意，这就是为什么我尝试用两 (2) 列自动排列 div，即使我加载了多个分区。它会像那样重新排列

【问题讨论】：

您可以尝试使用 CSS 网格来定义您的布局：developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
js中可以改变class的宽度值
“因为这些项目将来自我的数据库，所以在这种情况下使用 col-md-6 是个坏主意” - 为什么？不要把这样的事情说成是绝对的事实，解释一下实际的问题是什么。有没有可能你的意思是“我不知道如何处理”而不是“坏主意”？

标签： javascript css ms-access

【解决方案1】：

看看 Bootstraps 卡片布局card-deck。您可以用 x 数量的卡片填充单个 div。每张卡片的宽度可以通过flex-basis在CSS中声明。

这样就不需要额外的列来使其具有响应性。使用 CSS-grid 时也不需要创建映射（这也是一个有效的解决方案）。无需 JavaScript 解决方案。

下面我用two-col 类扩展了卡片组布局。同样，您可以扩展到三列或四列等。

SCSS

.card-deck {
    .card {
        flex-basis: 100%; // mobile first
    }

    /*@media (min-width: 768px)*/
    @include media-breakpoint-up(md) {
        &.two-col {
            .card {
                flex-basis: calc(50% - #{$grid-gutter-width}); // -30px
            }
        }
    }        
}

DEMO

【讨论】：