Question

预警：我对CSS不好。

您好，我正在制作一个显示3个最新帖子的留言板。我还希望用户选择在一个屏幕上显示的帖子数量，说5或10个帖子。

目前我拥有它以便所有帖子都以这种方式打印出来：

while ($i < $d){
// $d is entered by the user to determine how many posts are to be displayed.
    if ($i == $id_Max){
        echo "Reached last known post.";
        break;
    }

    $query2 = $con->prepare(
    "SELECT postName, postPath FROM " . $table .
    " WHERE id=(SELECT MAX(id-".$i.") FROM " . $table . ")"
    );
    $query2->execute();
    $result2 = $query2->fetch();
    $path = $result2["postPath"];
    $file = file_get_contents($path);

    echo "<article class = 'entry'>";

    echo "<section id = 'entryTitle'>";
    echo $result2["postName"] . "<br />";
    echo "</section>";

    echo $file;
    echo "<br />";

    echo "</article>";

    $i++;
}

因此，每个打印的帖子都有entry类。有了这个，我给每个帖子一个边框，但是我想这样做，以便它们之间有大约5px的空间。我设置了position: relative和top: 5px，但它只对最顶层的条目生效，并将它们从页面顶部向下移动5px。

基本上，我希望在全球范围内有一些工作，不必为每个可能的帖子写出一些内容。 #entry1，#entry2 ...

我看起来并不是因为如何做这个特定的事情，而是更多我可以从未来的事情中学到的东西。

谢谢， - 迈克尔米切尔

（如果我不清楚，请告诉我，我会尝试更好地解释。）

Answer 1

'top'css属性通常仅适用于位置为absolute的元素。你会希望入门课有：

margin-bottom:5px;

或

margin-top:5px;

我认为您不需要position:relative属性来执行此操作。

Answer 2

我认为这里有一些错误。

首先，元素之间的间距通常用边距处理：

/* all .entry elements */
.entry { margin-top: 10px }
/* all but the first .entry elements */
.entry + .entry { margin-top: 10px }

其次，当您不需要时，您似乎正在向数据库发出多个请求。您想要的查询如下所示：

SELECT postName, postPath FROM tablename ORDER BY date_added DESC LIMIT ?

这将为您提供一个可以迭代的顶级条目列表，并且比发出多个请求更快。如果您希望返回的条目数可配置，请确保您正在清理/转义该值。

样式帖子的数量可能有所不同？

2 个答案: