从数据库中获取数据时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);

}

Answer 1

您对所有图像使用while from <div id="categories">，您将创建一个带有类别的div，您只需更改代码以<li>在while中创建一个，例如：<div id="categories">&nbsp; &nbsp; <div class="category-post-container clear">&nbsp; &nbsp; &nbsp; <div class="categories-post-grid">&nbsp; &nbsp; &nbsp; &nbsp; <div class="category" id="category-nature">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="category-post-container root-category clear">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul><?php while($image = $images->fetch_assoc()){ ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li class="" style="background-image: url('uploads/<?php echo $image['image']&nbsp; ?>')">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="post-meta">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="square-link-cover" href="https://cee.exposure.co/rome"></a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="post-titles">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2 class="sip">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="https://cee.exposure.co/rome">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php echo $image['title']&nbsp; ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; <?php }?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div>