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

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

你的 while 循环中有 .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 彼此相邻，但因为您看起来 .cards（注意 S）同样，您将每个项目包装在 div 中。 div 是一个块元素，这意味着它会占据一整行，下一个元素将在它下面。

Answer 2

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

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

/！ \ 不适用于 IE8 和之前的版本

Answer 3

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

`

<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 循环之外，如下所示：

`

<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>

`

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

How to order divs side by side and centered when get datas from database in php and css

html

css

php

division