在 CSS/JS 中排列多个 div?
[英] Arrange multiple divs in CSS/JS?
本文介绍了在 CSS/JS 中排列多个 div?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
目前我有这些 div 使用 MDB
<div class="col-md-6"><div class="rounded-rectangle-svs card current-proj"><h5 class="text-default"><b>项目 1</b></h5><div class="row" style="overflow-x:auto;"><div class="col-md-8"><p class="">Lorem Ipsum 只是印刷和排版行业的虚拟文本.</p>
<div class="col-md-4 text-center"><h1 class="text-default"><b>86%</b></h1>
<div class="rounded-rectangle-svs card current-proj"><h5 class="text-primary"><b>项目 2</b></h5><div class="row" style="overflow-x:auto;"><div class="col-md-8"><p class="">Lorem Ipsum 只是印刷和排版行业的虚拟文本.</p>
<div class="col-md-4 text-center"><h1 class="text-primary"><b>86%</b></h1>
<div class="rounded-rectangle-svs card current-proj"><h5 class="text-secondary"><b>项目 3</b></h5><div class="row" style="overflow-x:auto;"><div class="col-md-8"><p class="">Lorem Ipsum 只是印刷和排版行业的虚拟文本.</p>
<div class="col-md-4 text-center"><h1 class="text-secondary"><b>86%</b></h1>
<div class="col-md-6"><div class="rounded-rectangle-svs card current-proj"><h5 class="text-success"><b>项目 4</b></h5><div class="row" style="overflow-x:auto;"><div class="col-md-8"><p class="">Lorem Ipsum 只是印刷和排版行业的虚拟文本.</p>
<div class="col-md-4 text-center"><h1 class="text-success"><b>86%</b></h1>
<div class="rounded-rectangle-svs card current-proj"><h5 class="text-danger"><b>项目 5</b></h5><div class="row" style="overflow-x:auto;"><div class="col-md-8"><p class="">Lorem Ipsum 只是印刷和排版行业的虚拟文本.</p>
<div class="col-md-4 text-center"><h1 class="text-danger"><b>86%</b></h1>
<div class="rounded-rectangle-svs card current-proj"><h5 class="text-warning"><b>项目 6</b></h5><div class="row" style="overflow-x:auto;"><div class="col-md-8"><p class="">Lorem Ipsum 只是印刷和排版行业的虚拟文本.</p>
<div class="col-md-4 text-center"><h1 class="text-warning"><b>86%</b></h1>
而这些div的输出是这样的
如您所见，col-md-6 类名称的 2 个不同 div 位于 row div 内.
对于每个 col-md-6 包含 3 个不同的项目.
我想要做什么，是否可以在不使用 col-md-6 的情况下安排这些项目 div?仅使用 JavaScript?也有这样的安排?
因为这些项目将来自我的数据库，所以在这种情况下使用 col-md-6 是个坏主意，这就是为什么我试图用两个(2) 这样的列，即使我加载了多个 div.它会像那样重新排列
解决方案
看一看 Bootstraps 卡片布局 卡片组.您可以用 x 数量的卡片填充单个 div.每张卡片的宽度可以通过 flex-basis 在 CSS 中声明.
这样就不需要额外的列来使其响应.使用 CSS-grid 时也不需要创建映射(这也是一个有效的解决方案).无需 JavaScript 解决方案.
下面我用 two-col 类扩展了卡片组布局.同样，您可以扩展到三列或四列等.
SCSS
.card-deck {.卡片 {弹性基础:100%；//移动优先}/*@媒体(最小宽度:768px)*/@include media-breakpoint-up(md) {&.双列{.卡片 {flex-basis: calc(50% - #{$grid-gutter-width});//-30像素}}}}
演示
Currently I have these divs using 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>
and the output of these divs is like this
As you can see the 2 different div with the class name of col-md-6 is inside the row div.
for each col-md-6 contains 3 different projects.
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?
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
解决方案
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.
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.
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屋！
查看全文
