php - 搜索结果格式

Question

我对显示搜索结果的问题感到震惊。这是我的一段代码

<style>
    .main {
        position: absolute;
        font-size: 1.01vw;
        color: Black;
        font-family: Helvetica;
        top: 13.5vw;
        left: 28.4%;
    }
</style>

<style>
    .details {
        position: absolute;
        font: 1.19vw;
        color: Black;
        font-family: Helvetica;
        top: 28%;
        left: 28.4%;
    }
</style>

<?php

$input = $_GET['input'] or die (mysql_error());
$terms = explode(" ", $input);
$query = "SELECT * FROM search WHERE ";

$first = true;

foreach ($terms as $each) {
    if ($first) {
        $query .= "keywords LIKE '%$each%' ";
        $first = false;
    } else {
        $query .= "OR keyword LIKE '%$each%' ";
    }
}

//Connect to Database
mysql_connect("localhost", "root", "");
mysql_select_db("databasem") or die ("database not found");

$query = mysql_query($query) or die (mysql_error());
$numrows = mysql_num_rows($query);

if ($numrows > 0) {
    while ($row = mysql_fetch_assoc($query)) {
        $id = $row['id'];
        $title = $row['title'];
        $description = $row['description'];
        $keywords = $row['keywords'];
        $link = $row['link'];

        echo "<div class=\"main\"><h2><a href='$link' style='text-decoration:none'><b>$title</b></a></h2>$description<br/></div>";
    }
    echo "<br /><br />$numrows Results Found\n";
} else {
    echo "<div class=\"details\">No Results Found <b>'$input'</b> </div>";
}

搜索结果显示在彼此之上，而不是一个接一个地显示。

我是 PHP 的新手，这是我生命中的第一个程序。我知道编码风格太旧了，我会在不久的将来尝试改进我的编码风格。如果代码中有某种更新，请纠正我。

谢谢

Answer 1

你的问题是 CSS 而不是 PHP -

.main {
  position: absolute;
  ...
  top:13.5vw;
  left:28.4%;

Absolute positioning意味着文本始终显示在屏幕上完全相同的位置 - 因为对于每个结果，您都在创建另一个 <div>类.main它只会被写在上面。

通常，只有在“绝对”必要时才使用 position: absolute – 它对于导航栏或 Logo 等必须位于屏幕上特定位置的东西很有用，但它对可变数量的文本有问题。如果您有列表，请使用 inline , block或 inline-block允许浏览器自己流动文本。

我建议:

因为这是您的第一个程序，并且猜测您可能刚刚从其他地方复制了 CSS，删除除字体设置之外的所有内容，对于您的结果，使用类似这样的东西来打印每个结果:

echo("<li> <h2>$title</h2> $description </li>");

(将其包装在 unordered list - <ul> 和 </ul> - 你的 while 语句周围。)