は、私は上の画像のようなカテゴリを表示したい

Question

私の要件ごとのような画像が、カント表示のように表示カテゴリページをしたい、しかし、私は2番目の画像のような出力、私のコードを取得しています以下に与えられる、これはここに示されている私の見解ページのコードである**それを介して

を行ってください。**

<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> 

これは、ここでは、ここで

#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

を示す私のCSSコードがソリューションMasonry Cascading grid layout libraryです。

MasonryはJavaScriptグリッドレイアウトライブラリです。利用可能な垂直スペースに基づいて最適な位置に要素を配置することによって機能します。あなたはおそらくそれがインターネット上で使用されているのを見てきました。

これで行くことができます。上記のリンクを確認してください。