Question

如何在php和css中从数据库获取数据时并排排列div并居中？

php和html代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/normalize.css">
  </head>
  <body>
    <?php include ("connect.php");
    $data = $db->query("select * from videos order by id desc");
    $data ->execute();
    while ($row=$data->fetch(PDO::FETCH_ASSOC)) {?>
  <div class="cards">
    <div class="card">
      <img src="<?php echo $row['thumbnail'];?>" class="card-img" />
      <div class="card-title">
        <h3><?php echo $row['v_name'];?></h3>
        <p><a href="#"><?php echo $row['v_models'];?></a></p>
      </div>
    </div>
  </div>
    <?php }?>
  </body>
</html>

css样式代码

body {
  background-color:#282828;

}
a{
  text-decoration: none;
}
.cards{
  text-align: center;
  font-size: 0;
}
.card{
  margin: 0 10px;
  width: 250px;
  text-align: left;
  display: inline-block;
  font-size: medium;
}
.card-img{
  width: 250px;
  margin-bottom: -5px;
}
.card-title{
  background-color: #FFFCF5;
  width: 240px;
  padding:5px;
  margin-bottom: 15px;
  color: #282828;
}
.card-title>p>a{
  color: #00BFA5;
}

我的页面如下所示：

但我希望这些图片并排排列

我不能那样。我该怎么办？谢谢

Answer 1

你在循环中得到.cards，把它取出来：

  <body>
  <div class="cards">
    <?php include ("connect.php");
    $data = $db->query("select * from videos order by id desc");
    $data ->execute();
    while ($row=$data->fetch(PDO::FETCH_ASSOC)) {?>
    <div class="card">
      <img src="<?php echo $row['thumbnail'];?>" class="card-img" />
      <div class="card-title">
        <h3><?php echo $row['v_name'];?></h3>
        <p><a href="#"><?php echo $row['v_models'];?></a></p>
      </div>
    </div>
    <?php }?>
  </div>
  </body>

你的代码不起作用的原因是因为.card是内联块，它会将多个card nexto放在一起，但是因为你看起来.cards（注意S），你将每个项目包装在一个div中。 div是一个块元素，这意味着它将占用一整行，下一个元素将落在它下面。

Answer 2

对于您解析的数据库中的每一行，您将得到以下输出：

`

<div class="cards">
    <div class="card">
      <img src="<?php echo $row['thumbnail'];?>" class="card-img" />
      <div class="card-title">
        <h3><?php echo $row['v_name'];?></h3>
        <p><a href="#"><?php echo $row['v_models'];?></a></p>
      </div>
    </div>
  </div>

`

所以，你所要做的就是让while循环之外的cotainer，就像这样：

`

<div class="cards">
<?php include ("connect.php");
    $data = $db->query("select * from videos order by id desc");
    $data ->execute();
    while ($row=$data->fetch(PDO::FETCH_ASSOC)) {?>
    <div class="card">
      <img src="<?php echo $row['thumbnail'];?>" class="card-img" />
      <div class="card-title">
        <h3><?php echo $row['v_name'];?></h3>
        <p><a href="#"><?php echo $row['v_models'];?></a></p>
      </div>
    </div>
    <?php }?>
  </div>

`

Answer 3

我知道这不是你想要的，但请尝试：

cards { display : flex ; flex-direction : row ; justify-content : space-between }

/！ \不适用于IE8和以前的

如何在php和css中从数据库获取数据时并排排序并居中

3 个答案: