砌体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> 

我希望这样可以解决你的问题