如何自动将 DIV 放入列中（未知数量的 DIV）

Question

我写了一些代码，在一个 DIV 中回显的 3 个变量（测验名称、级别和主题），如果有 4 个测验，它将打印 4 个不同的 DIV。

但是，每个 div 都打印在不同的行上，这并没有很好地利用空间，因为您可以在一行中放置 3 个。

我将如何让它以 3 行打印它们？

我在想也许是一张桌子？还是某种javascript？

这是我对 div 的剂量，抱歉，不是很清楚。此外，CSS 位于不同的页面上，但非常基本，只是将其定义为一个块。

for($i=0; $i<$num; $i++){?>
    <div class="quizBlock"><table>
    <tr align="left"><th colspan="2"><p class="subFontMe"><?php echo $quiz[$i]['Name']?></p></th></tr>
    <tr align="left"><th><p class="subFontSm"><?php echo $quiz[$i]['Level']?></p></th>
    <th><p class="subFontSm"><?php echo $sub[$quiz[$i]['Subject_ID']-1]['Subject']?></p></th></tr></p></table></div><br><?php }?>

Answer 1

一种使用模数检查的方法，如果 rows 的余数除以 3 等于 0。

我可以举一个例子，使用 javascript 将 div 动态填充到列数 它可以很容易地转换为 php。

这个例子不会通过 DOM 创建表。

var quiz = [['A',1,'Subject 1'],['B',3,'Subject 2'],['C',2,'Subject 3'],['D',78,'Subject 4']];

var t = document;
var m = quiz; // object data
var cols = 3 // num of cols

for(var j = 0; j < m.length; j++) {

 var c = t.createElement("div");
 c.className = "quizBlock"; // css class name

 var qbrs ='<table border=1 width=120><tr align="left"><th colspan="2"><p class="subFontMe">'+quiz[j][0]+'</p></th></tr><tr align="left"><th><p class="subFontSm">'+quiz[j][1]+'</p></th><th><p class="subFontSm">'+quiz[j][2]+'</p></th></tr></p></table>';

c.innerHTML = qbrs;

 // add clear float if 3rd value and not after last row also not before the first element
 if(j % cols == 0 && j != m.length && j != 0){ 
    var r = t.createElement("div");
    r.className = "clear";
    document.body.appendChild(r);
  }

 document.body.appendChild(c);

 }

让我知道这是否适合你

Answer 2

如果您希望 div 在一行中对齐。然后给它浮动左属性。并且宽度应该在类内部定义，以便父div可以容纳三个div。

<?PHP

for($i=0; $i<$num; $i++){?>

<div class="quizBlock" style="float:left">
<table>
<tr align="left"><th colspan="2"><p class="subFontMe"><?php echo $quiz[$i]['Name']?></p></th></tr>
<tr align="left"><th><p class="subFontSm"><?php echo $quiz[$i]['Level']?></p></th>
<th><p class="subFontSm"><?php echo $sub[$quiz[$i]['Subject_ID']-1]['Subject']?></p></th></tr></p>    </table></div>

<?php } ?>

或者您可能想尝试：

<div class="quizBlock">
<table>
<?PHP

for($i=0; $i<$num; $i++){ ?>


<tr align="left">
<th colspan="2"><p class="subFontMe"><?php echo $quiz[$i]['Name']?></p></th>
<th><p class="subFontSm"><?php echo $quiz[$i]['Level']?></p></th>
<th><p class="subFontSm"><?php echo $sub[$quiz[$i]['Subject_ID']-1]['Subject']?></p></th>
</tr>

<?php } ?>

</table>
</div>

这也将数据放在单独的行中。