从数据库中获取数据时html网格显示错误

Question

我有一个照片网格部分，如下所示：

在这里，我使用plang html 来显示图像，使用

每个图像的

标记。

现在我添加了一些 php、sql 代码，以便从数据库中显示图像，所以我做了以下代码：

.clear:before,
.category:before,
.clear:after,
.category:after {
  content: " ";
  display: table;
}

.clear:after,
.category:after {
  clear: both;
}

#categories .categories-post-grid {
  overflow: hidden
}

#categories .categories-post-grid .category {
  position: relative
}

#categories .categories-post-grid ul,
#categories .categories-post-grid li {
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 0
}

#categories .categories-post-grid .category .category-post-container {
  overflow: hidden;
  background: #efefef;
  position: relative
}

#categories .categories-post-grid .category ul {
  width: 100%;
  float: left
}

#categories .categories-post-grid .category ul:before,
#categories .categories-post-grid .category ul:after {
  content: " ";
  display: table
}

#categories .categories-post-grid .category ul:after {
  clear: both
}

#categories .categories-post-grid .category li {
  cursor: pointer;
  background: #1d1d1d;
  background-size: cover !important;
  background-position: center center;
  float: left;
  padding-bottom: 19%;
  width: 19%;
  box-sizing: border-box;
  border: solid 0px #fff;
  border-top: none;
  border-right: none;
  position: relative;
  margin: 0.5%
}

#categories .categories-post-grid .category li:nth-child(odd) {
  background: #ccc
}

#categories .categories-post-grid .category li:first-child {
  border-left: none
}

#categories .categories-post-grid .category li.bigger {
  width: 39%;
  padding-bottom: 39%;
  float: left
}

#categories .categories-post-grid .category li a.square-link-cover {
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 555;
  border: none !important;
  background: rgba(0, 0, 0, 0);
}

#categories .categories-post-grid .category li .post-meta {
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  overflow: hidden;
  opacity: 1;
  -webkit-transition: all 100ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 100ms cubic-bezier(0.42, 0, 0.58, 1);
  -ms-transition: all 100ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 100ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 100ms cubic-bezier(0.42, 0, 0.58, 1);
}

#categories .categories-post-grid .category li .post-meta .post-titles {
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  width: 100%;
  margin: 0px auto;
  padding: 20px 0;
  z-index: 999999;
  -webkit-transition: all 340ms cubic-bezier(0.42, 0, 0.585, 1);
  -webkit-transition: all 340ms cubic-bezier(0.42, 0, 0.585, 1.23);
  -moz-transition: all 340ms cubic-bezier(0.42, 0, 0.585, 1.23);
  -ms-transition: all 340ms cubic-bezier(0.42, 0, 0.585, 1.23);
  -o-transition: all 340ms cubic-bezier(0.42, 0, 0.585, 1.23);
  transition: all 340ms cubic-bezier(0.42, 0, 0.585, 1.23)
}

.cattext {
  text-align: center;
}

.cattext span {
  color: #F2136E;
}

.sip {
  z-index: 1;
  width: 90%;
  margin: 0px auto;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 2px;
  line-height: normal;
  -webkit-transition: opacity 340ms cubic-bezier(0.42, 0, 0.585, 1);
  -webkit-transition: opacity 340ms cubic-bezier(0.42, 0, 0.585, 1.23);
  -moz-transition: opacity 340ms cubic-bezier(0.42, 0, 0.585, 1.23);
  -ms-transition: opacity 340ms cubic-bezier(0.42, 0, 0.585, 1.23);
  -o-transition: opacity 340ms cubic-bezier(0.42, 0, 0.585, 1.23);
  transition: opacity 340ms cubic-bezier(0.42, 0, 0.585, 1.23)
}

.sip a {
  text-decoration: none;
  color: #046175;
  border: none;
}

.sip a:hover {
  color: #0e93b0;
}

<h1 class="cattext">Create Your <span>Own Invitation</span> Card</h1>
<?php
            require('db_config.php');


            $sql = "SELECT * FROM image_gallery limit 10";
            $images = $mysqli->query($sql);


            while($image = $images->fetch_assoc()){


            ?>
  <div id="categories">
    <div class="category-post-container clear">
      <div class="categories-post-grid">
        <div class="category" id="category-nature">
          <div class="category-post-container root-category clear">
            <ul>
              <li class="" style="background-image: url('uploads/<?php echo $image['image']  ?>')">
                <div class="post-meta">
                  <a class="square-link-cover" href="https://cee.exposure.co/rome"></a>
                  <div class="post-titles">
                    <h2 class="sip">
                      <a href="https://cee.exposure.co/rome">
                        <?php echo $image['title']  ?>
                      </a>
                    </h2>

                  </div>
                </div>
              </li>

            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <?php }?>

但这给了我如下的东西：

即图像在另一个下方列出。添加 sql 和 php 时，我的网格显示丢失了。谁能告诉我这里有什么问题。提前致谢

Answer 1

您从<div id="categories"> 使用while，因此对于所有图像，您将创建一个带有类别的div，您只需更改代码以在while 中创建一个<li>：

<div id="categories">
    <div class="category-post-container clear">
      <div class="categories-post-grid">
        <div class="category" id="category-nature">
          <div class="category-post-container root-category clear">
            <ul>
<?php while($image = $images->fetch_assoc()){ ?>
              <li class="" style="background-image: url('uploads/<?php echo $image['image']  ?>')">
                <div class="post-meta">
                  <a class="square-link-cover" href="https://cee.exposure.co/rome"></a>
                  <div class="post-titles">
                    <h2 class="sip">
                      <a href="https://cee.exposure.co/rome">
                        <?php echo $image['title']  ?>
                      </a>
                    </h2>

                  </div>
                </div>
              </li>
  <?php }?>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>