使用jQuery插件砌築空間的問題在IE和Firefox

<div class="rectangle-wrapper"> 
     <div class="rectangle-3 rect-box"> 
      <div class="image-wrap"> 
       <img src="img source here" alt=""/> 
      </div> 
      <div class="controls"> 
       <i class="icon-arrow-up icon-2 icon-it"></i> 

       <div class="text-3">69</div> 
       <i class="icon-arrow-down icon-3 icon-it"></i> 
       <a onclick="" href="#" class="btn-rect"> 
        <div class="rectangle-4 rect-btn"> 
         <div class="text-4">Sho Frenz</div> 
        </div> 
       </a> 
       <a onclick="" href="#"class="btn-rect"> 
        <div class="rectangle-5 rect-btn"> 
         <div class="text-5">Aii Waant!</div> 
        </div> 
       </a> 
      </div> 
     </div> 
</div> 

$(".rectangle-wrapper").masonry({ 
       itemSelector:".rect-box ", 
       columnWidth:240, 
       isFitWidth:true, 
       gutterWidth:0 
      });

不工作，我已經用砌築而成http://masonry.desandro.com/，發現一個問題，它不是在Firefox和IE瀏覽器。使用jQuery插件砌築空間的問題在IE和Firefox

它顯示我期望在單行中的4個元素。在Firefox和Ie中，它們只是在元素上顯示的兩個元素，而其他地方則是一個空格。

有人可以讓我知道如何解決它。

來源

2012-09-11 Adrian

很難說沒有看到你所有的JS和CSS;你有一個在線沙箱或jsfiddle可以看devtools嗎？ – Systembolaget

我刪除列寬（從js爲240），現在在fx和Ie中顯示3。在鉻它是4。如果我再增加一點寬度，我相信它會起作用。 – Adrian

@Systembolaget看看這個腳本http://ankit.webmatrix.arvixe.com/ – Adrian

在Chrome的devtools中查看它時，發現它設置錯誤。砌體在集裝箱內運行。不要只把其他東西放在那裏，比如頁眉和頁腳。您不給容器一個高度和寬度 - 寬度由查看器的瀏覽器窗口決定，高度由元素的數量和大小決定。基本設置組織這樣的：

<div id="container"> 
    <div class="item">...</div> 
    <div class="item">...</div> 
    <div class="item">...</div> 
    ... 
</div>

元素應該理想地遵循一個模塊的寬度和高度明智的，因爲你可以在原始文檔中看到。然後調用砌體這樣的：

$(function(){ 
    $('#container').masonry({ 
    // options 
    itemSelector : '.item', 
    columnWidth : 240 
    }); 
});

它是文檔here全押。

來源

2012-09-12 10:44:50 Systembolaget

對不起，我不清楚你的意思。我使用矩形包裝，其中包含我用作項目的正確框（作爲代碼）。請清楚你的觀點，然後我可以更好地解決問題。 – Adrian

有太多糾結的代碼，插件，腳本 - 並且每個元素都有一個單獨的類，而不是用這些功能的類爲樣式設置常用元素功能...爲什麼不重新開始，而是先簡單 - 學習CSS，然後只實現一個插件（砌體），讓它正常工作，然後擔心所有的設計元素，按鈕和額外的插件在你的網站的基本結構工作？否則，查找所有問題來自哪裏（腳本衝突，插件衝突，CSS衝突......）太耗時了。 – Systembolaget

使用jQuery插件砌築空間的問題在IE和Firefox

回答

相關問題