Как автоматически помещать DIV в столбцы (неизвестное количество DIV)

Question

У меня есть немного кода, который я написал, что 3 переменные эха (имя теста, уровень и тема) внутри DIV, если есть 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 были выровнены в одну строку.затем передайте ему свойство float left.и ширина должна быть определена внутри класса, чтобы родительский 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 } ?>

, или вы можете попробовать сделать следующее:данные в отдельных строках.