Html 如何在达到容器宽度后使表列彼此相邻并向下移动

我正在使用php和表生成一个产品列表，但目前看起来是这样的：

<ul class="products">
<?php $i=0; for each($products as $product { $i++; ?>
  <li class="products__single <?php if($i %4 = 0){ echo 'last'} ?>">
    <span class="image"><?php //echo image here ?></span>
    <span class="title"><?php //echo title here ?></span>
    <span class="description"><?php //echo description here ?></span>
    <span class="price"><?php//echo price here ?></span>
  </li>
<?php } //end for each loop ?>
</ul>

其中每个项目显示在前一个项目下。我试图得到它，使每个产品都显示在彼此旁边，一旦它达到容器宽度，它就进入下一行

我不确定使用table是否是正确的方法，但我在这方面很新，我不确定我还可以使用什么。有人能给我指一下正确的方向吗

以下是在my php中生成产品的部分代码：

    while($row = mysqli_fetch_array($result)){
    echo "<tr>
            <td><img src='$row[imagepath]' width='225' height'150' /></td>
            </br>
            <td>$row[name]</td>
            <div class='textwrap' ><td>$row[description]</td></div>
            <td>£$row[price]</td>
            <form action='basket.php' method='post'>
                <input type='submit' value='Add to basket' name='$row[pid]' />
            </form>
        </tr>";
}
      echo "</table>";

---

严格地说，对于表格数据，table元素更像是一个产品列表，因此标记如下：

<ul class="products">
<?php $i=0; for each($products as $product { $i++; ?>
  <li class="products__single <?php if($i %4 = 0){ echo 'last'} ?>">
    <span class="image"><?php //echo image here ?></span>
    <span class="title"><?php //echo title here ?></span>
    <span class="description"><?php //echo description here ?></span>
    <span class="price"><?php//echo price here ?></span>
  </li>
<?php } //end for each loop ?>
</ul>

$i变量只是为了使我们能够在每五个元素上添加最后一个类，以防止右边的边距破坏布局

然后，在给定宽度以下，媒体查询开始，并将列数减少到1

---

我还没有测试过这个，但它应该非常接近你想要的。

如果你能够利用它，这里有一个关于html5/css3专栏的好教程。您正在为每个回音添加新行。。。把

放在回音外，它们会并排坐着。哎呀。。。而不是用“”来包装回声

.products__single {
  float: left;
  width: 23%;
  margin-right: 2.66%;
  margin-bottom: 20px;
}
.products__single.last {
  margin-right: 0;
}

@media all and(max-width: 600px) {
  .products__single {
    width: 100%;
    margin-right: 0;
  }
}