Question

我在for循环中创建一个div并将它们放在文档上。 2个div将并排放置，下面的2个div位于它们之下，依此类推。

有人可以建议我这个案例的css样式是什么吗？这是我的代码

for (var i = 0; i < piechartDataArray.length; i++) {

        var elementID = 'piechart' + (i+1).toString();
        var element = document.createElement('div');
        element.id = elementID;
        document.body.appendChild(element);

      if (i%2 == 0) {
            document.getElementById(elementID).style.width=...                 
   }else{
         document.getElementById(elementID).style.width=... 
        }
}

Answer 1

假设以下HTML结构：

<div class="some-class"></div>
<div class="some-class"></div>
<div class="some-class"></div>
<div class="some-class"></div>

假设这个理想的布局：

|  |  |
-------
|  |  |

我使用这个CSS：

div.some-class {
    display: inline-block;
    width: 50%;
}

Answer 2

或者，您可以使用CSS3 Column方法：

＆＃13;

piechartDataArray = [1,2,3,4];

for (var i = 0; i < piechartDataArray.length; i++) {

        var elementID = 'piechart' + (i+1).toString();
        var element = document.createElement('div');
        element.id = elementID;
        document.getElementById('container').appendChild(element);
}

＆＃13;

div{
  background: blue;
  height: 100px;
  margin-bottom: 
}

#container{
  -webkit-column-count: 2;
  -webkit-column-gap: 10px;
}

＆＃13;

<section id="container"></section>

＆＃13;

Answer 3

对于每个div设置width = 50％和float：left

将div并排放置在for循环中 - CSS样式

3 个答案: