PHP , PDO - 查询结果 - 垂直到水平

Question

当我根据下面的代码进行搜索时，我会垂直获得所有结果并向下滚动……等等。有没有办法让我水平显示三个框的结果，然后在下面重新开始。我没有为 reuslts 使用表格，只是使用 CSS 进行样式设置。谢谢

$stmt = $conn->prepare("SELECT * FROM whisky_results WHERE name LIKE :name ORDER BY name ASC"); // Use = instead of LIKE for full matching
$stmt->bindParam(':name', $search);  
$stmt->execute();
$count = $stmt->rowCount(); // Added to count no. of results returned

if ($count >= 1) { // Only displays results if $count is 1 or more

while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {

    echo "<br>";
    echo "<div class=\"results\">";
        echo "<div class=\"result_name\">";
            echo "<b>Whisky Name:</b><br>";
            echo $row['name'];
        echo "</div>";

        //echo "<div class= \"result_description\">";
            //echo "Whisky Description:  ";
            //echo $row['description'];
        //echo "</div>";

        echo "<div class= \"result_highprice\">";
            echo "Highest Price Paid: £";
            echo $row['highest_price'];
        echo "</div>";

        echo "<div class= \"result_lowprice\">";
            echo "Lowest Price Paid: £";
            echo $row['lowest_price'];
        echo "</div>";

    echo "<div class= \"average_price\">";
            echo "Average Price Paid: £";
            echo $row['average_price'];
        echo "</div>";

    echo "<div class= \"last_price\">";
            echo "Last Price Paid: £";
            echo $row['last_price'];
        echo "</div>";


    echo "<div class= \"last_date\">";
            echo "Last date sold: ";
            echo $row['last_date'];
        echo "</div>";
    echo "</div>";
    echo "<br>";

} 

} else {
      echo " Sorry no records were found";
}

Answer 1

我不知道您希望如何分离您的内容，但这可以通过多种方式完成。这是一个使用 flexbox 的选项。

.container{
  display:flex;
  width: 330px;
  justify-content: space-around;
  flex-wrap: wrap;
  flex-direction: row;
}

.pod{
  width:30%;
  height:90px;
  background: red;
  margin: 0 0 10px 0;
}

<div class="container">
  <div class="pod">
  
  </div>
  <div class="pod">
  
  </div>
  <div class="pod">
  
  </div>
  <div class="pod">
  
  </div>
  <div class="pod">
  
  </div>
  <div class="pod">
  
  </div>
  <div class="pod">
  
  </div>
  <div class="pod">
  
  </div>
  <div class="pod">
  
  </div>
</div>

所以，例如:

echo "<div class=\"container\">";

while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {

    echo "<div class=\"pod results\">";
        echo "<div class=\"result_name\">";
            echo "<b>Whisky Name:</b><br>";
            echo $row['name'];
        echo "</div>";

        //echo "<div class= \"result_description\">";
            //echo "Whisky Description:  ";
            //echo $row['description'];
        //echo "</div>";

        echo "<div class= \"result_highprice\">";
            echo "Highest Price Paid: £";
            echo $row['highest_price'];
        echo "</div>";

        echo "<div class= \"result_lowprice\">";
            echo "Lowest Price Paid: £";
            echo $row['lowest_price'];
        echo "</div>";

    echo "<div class= \"pod average_price\">";
            echo "Average Price Paid: £";
            echo $row['average_price'];
        echo "</div>";

    echo "<div class= \"pod last_price\">";
            echo "Last Price Paid: £";
            echo $row['last_price'];
            echo "Last date sold: ";
            echo $row['last_date'];
        echo "</div>";

    echo "</div>";

} 

} else {
      echo " Sorry no records were found";
}

echo "</div>";