Question

我想显示类似上图的类别，但我得到的输出就像第二张图片一样，我的代码如下，请仔细阅读

**这是我在此处显示的查看页面代码**

 <div class="container">
        <div class="row">
            <?php foreach ($MoreListMenuLevel1 as $menu1) { ?>
                <?php if (count($this->Categories_model->listsector1($menu1->id)) > 0) {
                    ?>
                    <div class="main-category-width">

                        <h4><a href="<?php echo base_url(); ?>index.php/welcome/onSectorClick1?id=<?php echo $menu1->id; ?>&name=<?php echo $menu1->sub1_category_name; ?>"><?php echo $menu1->sub1_category_name; ?></a></h4>

                        <ul>
                            <?php foreach ($this->Categories_model->Morelistsector2($menu1->id) as $menu2) { ?>
                                <li><a href="<?php echo base_url(); ?>index.php/welcome/onSectorClick2?id=<?php echo $menu2->id; ?>&name=<?php echo $menu2->sub2_category_name; ?>"> <?php echo ucwords($menu2->sub2_category_name); ?></a></li>
                            <?php } ?> 
                        </ul>
                    </div>
                    <?php
                }
            }
            ?> 
        </div>
    </div>

这是我在这里显示的CSS代码

#modal-nav-wrap {
    position: fixed;
    top: 0;
    background: #fff;
    padding: 70px 50px;
    z-index: 100;
    width: 100%;
    height: 100%;
    display: none;
    overflow-y:scroll;
}
.main-category-width {
    width: 19%;
    display: inline-block;
    margin: 1% auto;
    vertical-align: top;
}
.main-category-width h4 a {
    color: #f43a43;
    text-transform: capitalize;
}
.main-category-width ul li {
    padding: 7px;
}
.main-category-width ul li a {
    color: #333;
}

Answer 1

以下是解决方案Masonry Cascading grid layout library。

Masonry是一个JavaScript网格布局库。它的工作原理是根据可用的垂直空间将元素放置在最佳位置，有点像石膏在墙上贴合石头。你可能已经在互联网上看到过它。

你可以这样做。检查上面的链接。

我希望显示类别页面，如图像，但不能按照我的要求显示

1 个答案: