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