div與砌體佈局內另一個石工佈局

我的問題是：我有一個石工佈局的容器，有可能是一個或多個項目有另一個容器與石工？div與砌體佈局內另一個石工佈局

<div class="masonry"> 
    <div class="item"></div> 
    <div class="item"> 
     <div class="masonry_inside"> 
      <div class="item_inside"></div> 
      <div class="item_inside"></div> 
      <div class="item_inside"></div> 
     </div>  
    </div> 
    <div class="item"></div> 
</div>

來源

2014-10-11 Pietro Mauro Borgonovo

你嘗試了嗎？ – Macsupport 2014-10-13 05:24:55

我嘗試，但第一個容器的項目有一個奇怪的底部邊距。 – 2014-10-18 19:29:27

你將不得不seperately初始化砌體每個網格容器上：

// Init masonry on outer container 
 
$('.masonry').masonry({ 
 
    itemSelector: '.item', 
 
}); 
 

 
// Init masonry on inner container 
 
$('.masonry_inside').masonry({ 
 
    // You need to use another item selector class on the inner elements 
 
    itemSelector: '.item_inside', 
 
});

.masonry { 
 
    width: 440px; 
 
    background-color: gray; 
 
} 
 

 
.item { 
 
    width: 200px; 
 
    background-color: black; 
 
    margin: 10px; 
 
} 
 

 
.item_inside { 
 
    width: 80px; 
 
    margin: 10px; 
 
    background-color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://unpkg.com/[email protected]/dist/masonry.pkgd.min.js"></script> 
 

 
<div class="masonry"> 
 
    <div class="item" style="height: 150px;"></div> 
 
    <div class="item" style="height: 200px;"></div> 
 
    <div class="item" style="height: 180px;"></div> 
 
    <div class="item"> 
 
     <div class="masonry_inside"> 
 
      <div class="item_inside" style="height: 180px;"></div> 
 
      <div class="item_inside" style="height: 80px;"></div> 
 
      <div class="item_inside" style="height: 120px;"></div> 
 
      <div class="item_inside" style="height: 35px;"></div> 
 
     </div>  
 
    </div> 
 
    <div class="item" style="height: 80px;"></div> 
 
</div>

來源

2017-09-29 12:46:45 Stirling

div與砌體佈局內另一個石工佈局

回答

相關問題