css in htmlを使用して検索エンジンの結果を水平に表示

Question

私のウェブサイト用の検索エンジンを作成し、データを正常にインポートしています。しかし、検索された画像は縦に表示され、1行に2つの画像が表示されます。以下は私のコードと検索結果のイメージです。

<?php 

$connection = new mysqli("localhost", "root", " " , "grand_database"); 

if($connection -> connect_error){ 

    die("Connection Failed : ". $connection-> connect_error); 
} 

if(isset($_GET['keyword'])){ 
    error_reporting(E_ALL); 

    $keyword = $_GET['keyword']; 

     $min_length = 3; 

      global $i; 


      if(strlen($keyword) >= $min_length){ // if query length is more or equal minimum length then 

    $keyword = htmlspecialchars($keyword); 

      $explosion = explode(" " , $keyword); 

      $query = "SELECT title , link , image , description FROM search WHERE " ; 

       foreach($explosion as $exploded_keyword){ 

        $i++; 

        if($i == 1) 

         $query.= "keywords LIKE '%$exploded_keyword%' " ; 

        else 
         $query.= "OR keywords LIKE '%$exploded_keyword%' "; 

       } 

     $result = $connection -> query($query); 

     if($result -> num_rows > 0){ // if one or more rows are returned do following 

     echo "<div class = 'container'> 

       <h3>You Searched For: $keyword</h3><br><h4>If you are not getting the desired results, please check your spellings or try different Search. 

       </div>"; 

     echo '<hr>'; 

     while($row = $result-> fetch_assoc()){ 

       $title = $row['title']; 
       $link = $row['link']; 
       $image = $row['image']; 
       $description = $row['description']; 


       echo "<div class= 'container'> 

       <div class= 'row'> 

    <div class= 'col-sm-4'> 

     <img src= '$image' class= 'img-responsive thumbnail' style= 'width: 300px;'/> 

     <h4><a href= '$link' target= '_blank'>$title<br></a></h4> 
     <h5>$description</h5><hr> 

    </div> </div> </div> <div class= 'container' style= 'height: 100px;'></div>"; 
     } 


    } 
    else{ // if there is no matching rows do following 
     echo "<div class= 'container'><h3>No Results Found</h3><br><h4>Plese check your spellings or try different keyword</h4></div>"; 
    } 

} 
    else{ // if query length is less than minimum 
     echo "<div class= 'container'><h3>No result found!</h3><br><h3>Minimum length is $min_length<h3><br> 

      <h3>Please enter the keyword, more than 3 characters. 
     </div>"; 
    } 

} 

$connection-> close(); 

？>

Answer 1

あなたは、同じ行でより多くの結果を置くことを試みることができます。次のコードがあなたの目的に役立つかもしれません。

for($l=0; $l<=count($result); $l+=3){ 
      echo "<div class= 'container'> 

      <div class= 'row'> 
      $j=0; 

    while($row = $result-> fetch_assoc() && $j<3){ 
      $j++; 

      $title = $row['title']; 
      $link = $row['link']; 
      $image = $row['image']; 
      $description = $row['description']; 


      echo "<div class= 'container'> 

      <div class= 'row'> 

<div class= 'col-sm-4'> 

    <img src= '$image' class= 'img-responsive thumbnail' style= 'width: 300px;'/> 

    <h4><a href= '$link' target= '_blank'>$title<br></a></h4> 
    <h5>$description</h5><hr> 

</div> </div> </div> <div class= 'container' style= 'height: 100px;'></div>"; 
    }} 

主なアイデアは、結果をループして複数の行を同じ行に配置することです。あなたの問題を解決する希望