在CSS/JS中安排多个div? [英] Arrange multiple divs in CSS/JS?

问题描述

当前，我使用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的输出是这样的

and the output of these divs is like this

您会看到，类名称为col-md-6的2个不同的div位于row div中.

As you can see the 2 different div with the class name of col-md-6 is inside the row div.

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

for each col-md-6 contains 3 different projects.

我要做什么，是否可以在不使用col-md-6的情况下安排这些项目的div?仅使用JavaScript?这样的安排吗?

What I'm trying to do, is it possbile to arrange these divs of projects without using col-md-6? with just JavaScript? with the arrangement like that too?

因为这些项目将来自我的数据库，所以在这种情况下使用col-md-6是一个不好的主意，这就是为什么即使我加载了多个，我也试图用两(2)列进行div的自动排列的原因divs.它将像这样重新排列

Because those project will be coming from my database it's a bad idea to use col-md-6 for this situation that's why I'm trying to do the automatic arrangement of divs with two(2) columns like that even if I loaded multiple divs. It will rearrange just like that

推荐答案

看看Bootstraps卡的布局卡片组. 您可以用x张卡片填充一个div.可以通过flex-basis在CSS中声明每张卡的宽度.

Take a look at Bootstraps card layout card-deck. You can fill a single div with x amount of cards. The width of each card can be declared in CSS by flex-basis.

这样，无需额外的列即可使其响应.同样，在使用CSS网格时也无需创建映射(这也是有效的解决方案).无需JavaScript解决方案.

This way there's no need for extra columns to make it responsive. Also no need to create a mapping when using CSS-grid (which is also a valid solution). No need for JavaScript solutions.

下面，我用two-col类扩展了卡甲板布局. 同样，您可以扩展到三列或四列，依此类推.

Below I've extended the card-deck layout with two-col class. Similarly you can extend to three-col or four-col and so on.

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

这篇关于在CSS/JS中安排多个div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！