Warning: file_get_contents(/data/phpspider/zhask/data//catemap/4/string/5.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何将带块的一列划分为两列？_Javascript_Css - Fatal编程技术网
Fatal编程技术网
  • javascript/
  • Javascript 如何将带块的一列划分为两列？

Javascript 如何将带块的一列划分为两列？

javascript css

Javascript 如何将带块的一列划分为两列？,javascript,css,Javascript,Css,我有一个容器里面有块。。。所有的东西都排成一列。我需要分两列。其中一个有5个块，另一个有5个块。插件为我生成代码，我不能插入div。javascript怎么能一分为二？ 块可以是10和5，15和20，我需要把它们分成两列 <div class="container"> <div> < /div> <div> < /div> <div> < /div> <div> < /div&

我有一个容器里面有块。。。所有的东西都排成一列。我需要分两列。其中一个有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;
}












.集装箱{
显示器：flex；
}
您可以将以下样式添加到
.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块对其进行包装：

$（文档）.ready（函数（）{
让all=$（'.container'）.children（'div'）.length；
设col1=all/2；
col1=Math.ceil（col1）；
for（设i=0；i

.container{
显示器：flex；
弯曲方向：行；
宽度：100%；
}
.col第一，.col第二{
显示器：flex；
弯曲方向：立柱；
宽度：50%；
}
/*这些只是附加样式，您不需要这些*/
.container.elem{
显示：块；
宽度：50px；
高度：60px；
位置：相对位置；
背景颜色：绿色；
保证金：4倍；
}
.col second.elem.col2{
背景颜色：钢蓝色；
}


我编写了一个代码，循环遍历一个div的子级，将其切成两半，将前半部分放在一个div中，后半部分放在另一个div中，希望这能有所帮助



//这里我们计算容器中div的长度，并使用Math.ceil确保没有得到.5的值
让length=Math.ceil（$（“.container”）.children（）.length/2）；
//在添加div之前保存当前html
let children=$（“.container”）.children（）；
//在计算之后，我们为前一半和后一半的项目添加容器div
$（“.container”）。追加（“”）；
//在这里，我们将后半部分添加到后半部分div
$（子项）.slice（长度）.appendTo（“.second-half”）；
//上半场呢
$（子项）.slice（0，长度）.appendTo（“.first-half”）

.container{
背景：蓝色；
高度：适合的内容；
}
div{
宽度：50px；
高度：20px；
边框：1px纯黑；
}
.上半场{
边框：2倍纯绿；
高度：适合的内容；
}



这应该在上半场
这是第二次

请展示您尝试过的设置div容器样式的方法？而不是请求javascript将内容拆分为2@RamondeVries网格或列计数不适合我。如果您还有其他建议，请告诉我您是否提供了实际的插件输出html，以及应用javascript/css后代码的结构？我也不是在说网格。我指的是一般的造型。有更多的方法可以让div在一个游戏中2乘2column@RamondeVries我更新了问题。我希望块分为两列，一半块分为一列另一列IE11中不起作用，它会破坏我的其他元素。需要其他解决方案根据您更新的问题，设置。容器宽度为100%，带
display:flex
和
flex direction:row
。。。然后将
col first
和
col second
的宽度都设置为50%，并将它们都设置为
display:flex
和
flex direction:column
我没有这些类（col first，col second）！我希望它看起来像这样，但现在它看起来像在第一个版本中。我写了它应该看起来有多简单。上面写着“我想要”查看我在上面编辑的答案