DIV внутри в то время как цикл в 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 проблемы, люди просто знают, как вниз голос, когда они не знают ответа, УВЫ!

Я использовал счетчик внутри цикла.

, который будет проверять, когда уже есть 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>