html - 生成多个 HTML 框的有效方法

Question

要生成 html 框，可以简单地：

html:

<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
<div>Box 4</div>
<div>Box 5</div>
<div>Box 6</div>

CSS：

body {
    font-size: 0;
}
div {
    display: inline-block;
    width: 33%;
    height: 100px;
    font-size: 12pt;
    background: #EEE;
    border: 1px solid #CCC;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

在我的项目中，我需要创建 N 个盒子，有没有一种方法可以附加它而无需单独创建每个盒子？

Answer 1

Not with pure HTML / CSS. You can do it with PHP using a simple for-loop, e.g.

<?php
  for($i = 1; $i <= 6; ++$i)
  {
    echo "<div class=\"box\">Box $i</div>\n";
  }
?>

Answer 2

Something like this will work:

<?php
for($i=0; $i<$x; $i++){
   echo '<div id="'.$i.'">Box '.$i.'</div>';
}
?>