html - 如何让表格列彼此相邻并在达到容器宽度后向下移动

Question

我正在使用 php 和表格生成产品列表，但它目前看起来像这样:

每一项都显示在前一项之下。我试图让每个产品都显示在彼此旁边，一旦它达到容器宽度，它就会转到下一行。

我不确定使用表格是否是正确的方法，但我对此很陌生，我不确定我还能使用什么。有人能指出我正确的方向吗。

这是在我的 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>";

这里还有相关的 CSS 代码:

.products{
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 1000px;
    height: 1000px;
    padding: 3px;
}

.textwrap{
    word-wrap: break-word; 
    width: 225px;
    margin-top:5px;
    margin-bottom:5px;
}

Answer 1

严格来说，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>

CSS

.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;
  }
}

$i 变量只是让我们能够在每五个元素上添加一个 last 类，以防止 margin-right 破坏布局。

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

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