<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>
仿九宫格布局
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 新项目中有用到这种界面,借鉴了别人的demo使用button来实现的,不记得原创在哪,我自己也修改和完善了其中一些...
- SnapKit的扩展------添加数组控制约束,和九宫格布局,等宽,等间距等布局方式 SnapKit是Swift...
- 一、概述 上次写了篇九宫格布局,实际运用范围有点小,而且Item的宽高固定死了,不利于其它使用。 所以我把上次写的...
- React Native实现商品九宫格布局 标签(空格分隔): React 实现效果: 首先将所需资源导入到XCo...
- 基上篇TouchID 指纹解锁 的技术文, 然后目前又练习一种解锁方式: 九宫格手势解锁. 在一些涉及个人隐私的场...