html - 在html中使用css水平显示搜索引擎结果

标签 html css sql search

我已经为我的网站创建了一个搜索引擎,它正在成功导入数据。但是搜索到的图像是垂直显示的,我希望它们每行显示两个图像。下面是我的代码和搜索结果的图片。

enter image description here

 <?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();

?>

最佳答案

您可以尝试将更多结果放在同一行中。以下代码可以满足您的目的。

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

主要思想是遍历结果并将多个结果放在同一行中。希望能解决您的问题

关于html - 在html中使用css水平显示搜索引擎结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44732373/

相关文章:

sql - Hadoop SQL需要一个表名来获取时间。如何获得 table ?

c# - 在下载的 txt 文件中提取 url 链接

html - 显示 : inline-block; weird spacing behavior

css - IMG 没有显示上面的背景颜色?

jquery - 防止内容在滚动条显示/隐藏上水平移动

html - 内部 div 不会填充高度为 :auto 的外部 div

sql - 如何查找两个日期日期之间的特定记录

php - 使用 mysql_fetch_array() 显示一些图像

php - 如何回显 html 元素,内联

html - 为什么 Firefox 和 Chrome 在将 U+3002 与 `word-break: keep-all` 一起使用时表现不同?