当div的高度相等时，CSS列不工作

我正在尝试使一个类似于masonry的列不需要加载另一个JS插件。当div的高度相等时，CSS列不工作

我的HTML看起来像这样

<div class="masonry"> 
    <div class="item"> 
     <p class="item__par">texttexttexttext</p>  
     <div class="item--inner"> 
      <p>itemitemitemitemitemitemitemitemitem</p> 
     </div> 
    </div> 
    <div class="item"> 
     <p class="item__par">texttexttexttext</p>  
     <div class="item--inner"> 
      <p>itemitemitemitemitemitemitemitemitem</p> 
     </div> 
    </div> 
    <div class="item"> 
     <p class="item__par">texttexttexttext</p>  
     <div class="item--inner"> 
      <p>itemitemitemitemitemitemitemitemitem</p> 
     </div> 
    </div> 
    <div class="item"> 
     <p class="item__par">texttexttexttext</p>  
     <div class="item--inner"> 
      <p>itemitemitemitemitemitemitemitemitem</p> 
     </div> 
    </div> 
     <div class="item"> 
     <p class="item__par">texttexttexttext</p>  
     <div class="item--inner"> 
      <p>itemitemitemitemitemitemitemitemitem</p> 
     </div> 
    </div> 
     <div class="item"> 
     <p class="item__par">texttexttexttext</p> <a href="" class="">texttexttexttexttexttext</a> 

     <div class="item--inner"> 
      <p>itemitemitemitemitemitemitemitemitem</p> 
     </div> 
    </div> 
     <div class="item"> 
     <p class="item__par">texttexttexttext</p>  
     <div class="item--inner"> 
      <p>itemitemitemitemitemitemitemitemitem</p> 
     </div> 
    </div> 
</div>

CSS：

.masonry { 
    -moz-column-count:3; 
    -webkit-column-count:3; 
    column-count: 3; 
} 
.item { 
    width: 273px; 
    border:1px solid black; 
    background: lightgray; 
    display:inline-block; 
    vertical-align:top; 
    margin-right:50px; 
    margin-bottom:50px; 
}

不知道原因，但它似乎是列数不工作。第二行的最后一个元素向下拉，而不是浮动到第二行的右侧。

更新：当块具有相同的高度时会发生这种情况。当我改变内容，列开始的工作水平

请参阅捣鼓更清晰，并分享您对this.Thanks

http://jsfiddle.net/frontDev111/7Lcrt8kq/

来源

2014-11-22 FrontDev

那些列垂直堆叠，不是水平的经验。如此这般：

item1 item4 item7 

item2 item5 

item3 item6

您可以通过简单地删除列数的属性达到预期的行为：http://jsfiddle.net/zephod/n42sqd4v/1/

编辑：如果你想充分砌筑的行为，我的建议是使用jQuery的砌体插件。它不仅会覆盖很多你会错过的边缘案例，而且它还会在一系列广泛的网络浏览器中进行全面测试，并且需要一个非常有力的理由来重新发明。

来源

2014-11-22 18:43:31

我看到了，但是移除了列数，我失去了砌体外观。我已经更新了关于这种行为的问题。 – FrontDev 2014-11-22 18:58:23

砌体不要让我使用css边距，我应该将它们设置为“阴沟”，如果您知道如何在响应性中更改阴沟，那将非常棒！ – FrontDev 2014-11-22 19:15:56

也许这是一个单独的SO问题，因为这似乎已经结束了？ – 2014-11-22 19:17:41

不，你的代码正在工作。它只是没有响应，如果你让jsfidle浏览器窗口更大，你会看到清晰的3个colums。

来源

2014-11-22 19:15:54

我已更改我的代码以显示内容在块中不同时列计数的行为不同。如果你再次检查小提琴，你会看到不同之处。 – FrontDev 2014-11-22 19:18:03

当div的高度相等时，CSS列不工作

回答

相关问题