仿九宫格布局

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>