Question

我有一个容器，其中有块……所有内容都排成一列。我需要分成两列。一个中有5个块，另一个中有5个块。该插件会为我生成代码，但我无法插入div。如何将javascript一分为二？块可以是10和5以及15和20，我需要将它们分为两列

<div class="container">

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

</div>

我想要这个结果

<div class="container">
  <div class="col-first">
    <div> < /div>
    <div> < /div>
    <div> < /div>
    <div> < /div>
    <div> < /div>
  </div>
  <div class="col-second">
    <div> < /div>
    <div> < /div>
    <div> < /div>
    <div> < /div>
    <div> < /div>
  </div>

</div>

.container{
 display: flex;
}

Answer 1

您可以将以下样式添加到.container：

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.container div {
    display: inline-grid;
}

那应该将.container分成两列

好吧，因为您没有这些类，所以可以将它们放在正在使用的样式表中，然后使用Javascript将它们分为两个部分-这就是我的意思：- 有一个函数可以计算.container类中的div数量：在这种情况下，我使用的是jQuery

let all = $('.container').children('div').length;

然后将长度除以2-这将得到第一列。

let col1 = all/2;

然后将值四舍五入，以防all变成奇数。如果全部为10，则col1将为5。如果全部为9，col1仍将为5。

col1 = Math.ceil(col1);

现在可以应用样式：此循环将适当的样式添加到元素，并将其包装到另一个使用以下样式的div块中：

$(document).ready(function(){
  let all = $('.container').children('div').length;
  let col1 = all/2;
  col1 = Math.ceil(col1);
  for(let i = 0; i < all; i++){
    if(i < col1){
      $('.container').children('div').eq(i).addClass('col1');
    }
    else {
      $('.container').children('div').eq(i).addClass('col2');
    }
  }
  $('.container').children('.col1').wrapAll('<div class="col-first">');
  $('.container').children('.col2').wrapAll('<div class="col-second">');
});

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.col-first, .col-second {
  display: flex;
  flex-direction: column;
  width: 50%;
}

/* These are just additional styles, you dont need these */
.container .elem {
  display: block;
  width: 50px;
  height: 60px;
  position: relative;
  background-color: green;
  margin: 4px;
}

.col-second .elem.col2 {
  background-color: steelblue;
}

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<div class="container">
  <div class="elem"></div>
  <div class="elem"></div>
  <div class="elem"></div>
  <div class="elem"></div>
  <div class="elem"></div>
  <div class="elem"></div>
  <div class="elem"></div>
  <div class="elem"></div>
  <div class="elem"></div>
</div>

我还添加了'.elem'类，以便您可以查看元素的行为

Answer 2

我已经编写了一个代码，该代码循环遍历div的子代，将其切成两半，然后将前半部分放入div中，然后将下半部分放入另一个div中，希望对您有所帮助

//here we calculate the length of the divs inside the container, and with Math.ceil we make sure we don't get .5 values
let length = Math.ceil($(".container").children().length /2);
//save the current html before we add div's
let children = $(".container").children();
//after the calculation we add the container divs for the first and second half of the items
$(".container").append("<div class='first-half half'></div><div class='second-half half'></div>");

//here we add the last half to the last half div
$(children).slice(length).appendTo(".second-half");
//and the first half
$(children).slice(0, length).appendTo(".first-half");

.container{
  background: blue;
  height: fit-content;
}
div{
  width: 50px;
  height: 20px;
  border: 1px solid black;
}
.first-half{
  border: 2px solid green;
  height: fit-content;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">

  <div>this should be in the first half </div>
  <div> </div>
  <div> </div>
  <div> </div>
  <div> </div>
  <div> </div>
  <div> </div>
  <div> </div>
  <div> </div>
  <div> this in the second</div>

</div>

不要介意CSS。看看html输出

如何将一列与区块一分为二？

2 个答案: