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

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

这是我的密码：

---

您不需要在CSS中使用

position:fixed

，因为这会将所有相关元素放置在同一位置，即使您正在滚动。然后，

左侧

和

顶部

也不重要

最好将每一篇文章都放在一个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>';
  }

  ?>

如果要定义

日期

和

PostTitle

的位置，相对于其

框

，您可以：

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

---

除非你提供CSS，对不起，我们帮不了你。CSS定位所有东西，您正在复制

id

s。所有东西的位置都是固定的，并且具有相同的坐标。你把所有东西都放在同一个地方。从所有位置移除“位置：固定”。正如@PraveenKumar所提到的，让它们成为类，而不是id。非常感谢-都修复了！

  <?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>';
  }

  ?>

.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;
} 

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