Question

我将数据从数据库中拉到前端，但每个条目都出现在同一位置并重叠。如何以与StackOverflow的“热门问题”列表类似的方式将我的数据显示在列表中？

这是我的代码：

      <?php

      include 'main.html';

      include 'dbconnect.php';

      $findPosts = "SELECT * FROM Posts";
      $showPosts = mysqli_query($db, $findPosts) or die(mysqli_error);

      while ($currentrow = mysqli_fetch_array($showPosts)) {

      echo '<a href="http://www.youtube.com"      id="PostTitle">'.$currentrow['Title'].'</a>';


      echo '<p id="Date">'.$currentrow['Date'].'</p>';
      }

      ?>

这是我的css：

#PostBox{
  position: fixed;
  left: 200px;
  top: 120px;
  margin-bottom: 400px;
  width: 400px;
  padding-top: 5px;
  padding-bottom: 5px;
  } 

#PostTitle {
  position: fixed;
  top: 272px;
  left: 120px;
  font-family: helvetica neue;
  font-size: 18px;
  color: #0066CC;
  text-decoration:none;
}

#Date {
  font-family: helvetica neue;
  font-size: 12px;
  position: fixed;
  top: 302px;
  left: 120px;
  color: #696969;
  text-decoration: bold;
}

Answer 1

您不需要在CSS中使用position: fixed，因为这会将所有相关元素放在同一个地方，即使您正在滚动。然后，left和top也不重要。

将每个帖子放在div框中是个好主意：

  <?php

  include 'main.html';

  include 'dbconnect.php';

  $findPosts = "SELECT * FROM Posts";
  $showPosts = mysqli_query($db, $findPosts) or die(mysqli_error);

  while ($currentrow = mysqli_fetch_array($showPosts)) {

      echo '<div class="box">';
      echo '<a href="http://www.youtube.com" class="PostTitle">'.$currentrow['Title'].'</a>';
      echo '<p class="Date">'.$currentrow['Date'].'</p>';
      echo '</div>';
  }

  ?>

你可以像这样改变你的CSS：
（如果需要，可以删除.box的CSS，因为它只是使每个帖子的框都可见。）

.box{
   margin:2px;
   background-color:#cccccc;
}

.PostTitle {
  font-family: helvetica neue;
  font-size: 18px;
  color: #0066CC;
  text-decoration:none;
}

.Date {
  color: #696969;
  text-decoration: bold;
}

您想要定义Date和PostTitle相对于box的位置，您可以：

.box{
  position:relative;
}
.PostTitle{
  position:absolute;
  left:0;
  top:0;
}
.Date{
  position:absolute;
  right:0;
  bottom:0;
}

如何复制StackOverflow问题列表格式？

1 个答案: