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

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