时间戳

首页 > 解决方案 > 在 CSS/JS 中排列多个 div？

javascript - 在 CSS/JS 中排列多个 div？

问题描述

目前我有这些 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的输出是这样的

在此处输入图像描述

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

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

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

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

标签： javascriptcssms-access

解决方案

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

这样就不需要额外的列来使其响应。使用 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
            }
        }
    }        
}

演示

推荐阅读