同位素砌體問題

我的集裝箱格是1170px寬。我正在嘗試放置3個div。一個是275px寬，第二個是580px寬和第三個275px寬。所以總共 - 1130px。

我無法將第三個與另外兩個放在同一行上。無論我製作容器分區多寬，它都會下降。

請幫幫忙，我的大腦很快就要爆炸..

HTML：

<div class="container"> 
     <div class="row"> 
      <div class="grid"> 

       <div class="grid-item"> 
        <img src="img/portfolio1.jpg" alt=""> 
       </div> 

       <div class="grid-item width-double"> 
        <img src="img/portfolio2.jpg" alt=""> 
       </div> 

       <div class="grid-item"> 
        <img src="img/portfolio3.jpg" alt=""> 
       </div> 

      </div> 
     </div> 
    </div>

CSS：

.grid { 

    .grid-item { 
     padding: 0; 

     width: 275px; 
     height: 275px; 
     float: left; 

     &.width-double { 
      width: 580px; 
     } 

     &.height-double { 
      height: 580px; 
     } 
    } 

}

JS：

$grid.isotope({ 
    itemSelector: '.grid-item', 
    layoutMode: 'masonry' 
});

http://codepen.io/anon/pen/meORoL

來源

2015-09-26 Bravi

你能創建一個類似[DEMO]（HTTP：// WWW .jsfiddle.net）。由於容器和行div的CSS也需要幫助你。 – divy3993

是的，這裏是：http://codepen.io/anon/pen/meORoL – Bravi

Demo

var $grid = $('.grid'); 
$grid.isotope(
{ 
     itemSelector: '.grid-item', 
     masonry: 
     { 
      columnWidth:1 
     } 
});

你要設置列smthng像

來源

2015-09-26 21:51:56 Diptox

是的，這是來自同位素。不知道如何解決這個問題.. – Bravi

我修復了它，我會更新我的答案 – Diptox

我試圖將它設置爲275，但沒有工作，但這工作.. – Bravi

Diptox的回答作品的寬度，但我不知道這是否是處理這種情況的最好辦法。

理想情況下，您可以自己設置columnWidth，但未設置時則由網格中第一項的大小決定。你的網格被打破的原因是因爲網格中的較大的項目不是第一個項目的偶數倍。它的寬度爲580px，而columnWidth（在這種情況下，由第一個項目確定）具有275px的寬度，所以它不適合嵌入由Masonry設置的275px寬度列。如果它已設置爲275px的偶數倍，如550px（275 * 2 = 550），則它將按預期工作。

我不知道是否有什麼擔心將columnWidth設置爲1，但我覺得它不是理想的，因爲它會成爲默認值，否則 - 儘管它可能完全沒有問題。

編輯：忘了補充代碼

CSS：

.grid-item.width-double { 
    width: 550px; 
}

的Javascript：

$grid.isotope({ 
    itemSelector: '.grid-item', 
    masonry: { 
     columnWidth: 275, 
    } 
});

http://codepen.io/anon/pen/MabJdw

來源

2015-09-26 22:42:11

同位素砌體問題

回答

相關問題