DIV中while循環在PHP

Question

搜索結果應該顯示像這樣

但我的結果堆疊在每個之上。

這裏是我的代碼：

<div class="container"> 

<?php 
    mysql_connect("localhost", "root", "") or die(mysql_error()); 
    mysql_select_db("thesis") or die(mysql_error()); 

    $search = trim($_POST['SearchKeywords']); 

    $query = " SELECT * FROM new_data WHERE Product_Title or Product_link LIKE'%$search%' "; 

    $sql = mysql_query($query) or die(mysql_error()); 
    $count = mysql_num_rows($sql); 

    $count == 0; 

    if ($count == 0) { 

     echo "Sorry, Nothing Found !!"; 

    }else{ 

    while ($row = mysql_fetch_array($sql)) 
    { 
     $img = $row ['Product_Img']; 
     $link = $row ['Product_link']; 
     $title = $row ['Product_Title']; 
     $price = $row ['Product_Price']; 
?> 

<div class="card"> 
    <div class="front alert alert-success"> 
    <?php echo "$title"; 
     echo "<img src='$img' width='80px' height='100px'>"; 
     echo "$price"; ?> 
    </div> 
</div> 
<?php 
    }; 
    }; 
?> 
</div> <!-- Container --> 

那些格塊是一個容器內。 我添加了一個引導類，爲了更好的設計。

Answer 1

沒有CSS問題，人們只知道如何往下投票時，他們不知道答案，唉！

我在while while循環中使用了一個計數器。

這將檢查的時候，已經有4塊/產品中的單排那麼它會創建一個新的行

<?php 

    if($productCount == 0) 
    { 
     echo "<div class='row'>";    } 
    } 
     $productCount++; 

    if($productCount==4) 
    { 
     echo "</div>" ; 
     $productCount = 0; 
    } 

?> 

Answer 2

您可以使用thumbnails with custom content

<div class="row"> 
    <div class="col-sm-6 col-md-4"> 
    <div class="thumbnail"> 
     <img src="..." alt="..."> 
     <div class="caption"> 
     <h3>Thumbnail label</h3> 
     <p>...</p> 
     <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> 
     </div> 
    </div> 
    </div> 
</div>