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

【问题标题】：Showing search engine result horizontally using css in html在 html 中使用 css 水平显示搜索引擎结果
【发布时间】：2017-11-27 16:18:30
【问题描述】：

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

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

【问题讨论】：

Display 2 images per row side by side, centered horizontally and vertically的可能重复
这不是 PHP 问题，这是 CSS 问题。看看花车。
这和上面的问题不一样。我的问题是如何让我的搜索结果水平显示。编码是用 PHP 编写的。
要获得更好的答案，请将 PHP 排除在您的问题之外。将其展平为纯 HTML，以便其他人可以复制/粘贴它以检查发生了什么。

标签： html css sql search

【解决方案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>";
     }}

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

【讨论】：

谢谢您，先生，您的答复。但是你能告诉我把这段代码放在哪里以及如何放置吗？因为我遇到了错误。
解析错误：语法错误，第 240 行 C:\xampp\htdocs\Boehub\search.php 中的文件意外结束。我想我放错了代码。你能告诉我在我现有的代码中放置代码的位置吗？
它应该在你的水平线之后
我什么都做了，先生。但没有取得任何成功。请帮帮我。