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>

也将数据放在不同的行中。

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

2 个答案: