具有不同尺寸圖像的中心砌體佈局

Question

我遇到了在網格中使用三種不同圖像尺寸時試圖保持砌體居中的問題。

JS -

$('#container').masonry({ 
    itemSelector: '.item', 
    //isFitWidth: true, // This setting ignores my max-width or width settings for #container but gives me the result that I'm looking for 
    columnWidth: 155 
}); 

CSS -

#container { 
    max-width: 940px; 
} 

@media only screen and (max-width: 768px) { 
    #container { 
     max-width: 728px; 
    } 
} 

HTML -

<div id="container"> 
    <ul> 
     <li class="item">item</li> 
     <li class="item">item</li> 
     <li class="item">item</li> 
    </ul> 
</div> 

砌築工程使用默認的寬度時，如預期（940px），但如果我嘗試查看使用具有768px的最大解決方案的設備，網格項不再居中。這有可能使用當前的設置嗎？

Answer 1

我有一個類似的問題，我解決了將最大寬度設置爲外部div。

這給一試：

JS

$('#container').masonry({ 
    itemSelector: '.item', 
    isFitWidth: true, 
    columnWidth: 155 
}); 

CSS

#wrapper { 
    max-width: 940px; 
} 

@media only screen and (max-width: 768px) { 
    #wrapper { 
     max-width: 728px; 
    } 
} 

HTML

<div id="wrapper"> 
    <div id="container"> 
     <ul> 
      <li class="item">item</li> 
      <li class="item">item</li> 
      <li class="item">item</li> 
     </ul> 
    </div> 
</div>