砌體ColumnWidth％

Question

我希望有人能幫助我。我已經去了好幾個小時，但我似乎無法修復它（我是一個排名$％＃@！業餘愛好者）。我一直在嘗試砌築不同寬度的工作。尺寸以％表示。我正在自定義一個WordPress主題，所以我正在處理一個預先編碼的石工文件和預先編碼的CSS。

的CSS和HTML基本回落到這個（如果你需要更多的代碼，請讓我知道）：

.posts { 
    overflow: visible !important; 
    position: relative; 
} 

.post-container { 
    width: 50% 
    padding: 10px; 
    overflow: hidden; 
} 

.post-container .w2 { 
    width: 100% 
    padding: 10px; 
    overflow: hidden; 
} 

的HTML：

<div class="posts"> 
    <div class="post-container w2>Post</div> 
    <div class="post-container>Post</div> 
    <div class="post-container>Post</div> 
</div> 

磚石結構：

//Masonry blocks 
$blocks = $(".posts"); 

$blocks.imagesLoaded(function() { 
    $blocks.masonry({ 
     itemSelector: '.post-container', 
    }); 

    // Fade blocks in after images are ready (prevents jumping and re-rendering) 
     $(".post-container").fadeIn(); 
    }); 

    $(document).ready(function() { setTimeout(function() { $blocks.masonry(); }, 500); }); 

    $(window).resize(function() { 
     $blocks.masonry(); 
    }); 

因此：如果第一個帖子是「後置容器.2」，那麼兩個'後置容器'將不會一起滑動。如果我先發布兩個「後置容器」，然後再發布「後置容器.2」，他們確實會一起滑動。 從搜索interwebs，我收集它與石工ColumnWidth有關。我嘗試了很多不同的選擇，但無濟於事。至少將ColumnWidth設置爲'.post-container'將不會做到這一點。看起來，如果第一篇文章是「.post-container .w2」，儘管所有後面的帖子都是50％（'post-container'），砌體總是使用100％的寬度。

我需要做什麼，我可以有不同的％寬度，即使第一個是100％？

我希望我不太清楚，但如果我是，請告訴我，我會盡力解釋它。 感謝您花時間閱讀本文。

最佳， 艾倫

Answer 1

如果沒有設置columnWidth時，砌體將使用第一個元素外寬度。

這就解釋了爲什麼每個元素都在新的行中，它們都具有100％的寬度。

使用外部CSS類設置列的大小很方便。如果你的元素有填充，設置box-sizing: border-box;也很重要。

在下面的演示中，我將columnWidth選項設置爲25％ - 如果例如您需要將10個元素並排 - 您必須將其設置爲10％，您可以在.sizer CSS類中對其進行調整。您當然可以「連接」列，並且在CSS中設置兩個寬度爲50％的元素。

演示：http://jsfiddle.net/Lob6mse1/2/

的JavaScript：

$blocks = $(".posts"); 
$blocks.masonry({ 
    itemSelector: '.post-container', 
    columnWidth: ".sizer" 
}); 

HTML：

<div class="posts"> 
    <div class="sizer"></div> 
    <div class="post-container w2">Post</div> 
    <div class="post-container">Post</div> 
    <div class="post-container">Post</div> 
</div> 

CSS：

.posts * { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
      box-sizing: border-box; 
} 

.posts { 
    position: relative; 
} 

.post-container { 
    width: 50%; 
    min-height: 100px; 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    background-color: #999; 
} 

.w2 { 

    width: 100%; 
    height: 100px; 
    padding: 0; 
    background-color: #EEE; 
} 

.sizer { 
    box-sizing: border-box; 
    width: 25%; 
} 

Answer 2

指一個div與多個類別中的CSS正確的方法是：

.post-container.w2 { 
    width: 100% 
    padding: 10px; 
    overflow: hidden; 
} 

你要刪除的第一類和第二類之間的空間。否則，你指的是在HTML中的類內的類。所以：

<div class="posts"> 
    <div class="post-container> 
     <div class="w2"> 
      Post 
     </div> 
    </div> 
    <div class="post-container>Post</div> 
    <div class="post-container>Post</div> 
</div> 

我希望這樣可以解決你的問題