0
点赞
收藏
分享

微信扫一扫

仿九宫格布局

SDKB英文 2022-07-14 阅读 56

仿九宫格布局_java

s1.png


<style>
.parent{ display: table; table-layout: fixed; width: 100%; }
.row { display: table-row; text-align: center}
.item{ display:table-cell; width: 23%; height: 117px; }
.item > img{width: 30px;height: 30px;}
.fodder-666{color: #666666;font-size: 14px;font-weight: 600;padding-top: 13px}
</style>
<div class="fl-fodder">
<!--展示分类-->
<div class="fl-fodder-c" style="padding-top: 11px">
<div class="parent">
<div class="row">
<div class="item">
<img src="../image/fodder1.png" alt="">
<div class="fodder-666">
主粮
</div>
</div>
<div class="item">
<img src="../image/fodder2.png" alt="">
<div class="fodder-666">
零食
</div>
</div>
<div class="item">
<img src="../image/fodder3.png" alt="">
<div class="fodder-666">
玩具
</div>
</div>
<div class="item">
<img src="../image/fodder3.png" alt="">
<div class="fodder-666">
出行
</div>
</div>
</div>
<div class="row">
<div class="item">
<img src="../image/fodder1.png" alt="">
<div class="fodder-666">
主粮
</div>
</div>
<div class="item">
<img src="../image/fodder2.png" alt="">
<div class="fodder-666">
主粮
</div>
</div>
<div class="item">
<img src="../image/fodder3.png" alt="">
<div class="fodder-666">
主粮
</div>
</div>
<div class="item">
<img src="../image/fodder3.png" alt="">
<div class="fodder-666">
主粮
</div>
</div>
</div>
<div class="row">
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</div>
</div>

<!--展示banner-->
<div class="fl-fodder-b">

</div>
</div>

举报

相关推荐

0 条评论