我有一個照片網(wǎng)格部分，如下所示：在這里我使用plang html來顯示圖像，使用每個圖像的標(biāo)簽。現(xiàn)在我添加了一些 php、sql 代碼，以便從數(shù)據(jù)庫中顯示圖像，所以我做了以下代碼：.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);}
1 回答
臨摹微笑
TA貢獻1982條經(jīng)驗 獲得超2個贊
您對所有圖像使用while from <div id="categories">，您將創(chuàng)建一個帶有類別的div，您只需更改代碼以<li>在while中創(chuàng)建一個，例如：
<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>
- 1 回答
- 0 關(guān)注
- 121 瀏覽
添加回答
舉報
0/150
提交
取消