浮动框css

Question

我有一个Joomla网站与K2组件。我有一个不好看的“问题”。请参阅图像：

Css box foating problem

下面是CSS文件的一部分是什么，我认为它适用于这里：

/* --- Item groups --- */ 
div.itemList {} 
div#itemListLeading {} 
div#itemListPrimary {} 
div#itemListSecondary {} 
div#itemListLinks {background:#f7fafe;border:1px solid #ddd;margin:8px 0;padding:8px;} 

div.itemContainer {float:left;} 
div.itemContainerLast {} /* this class is appended to the last container on each row  of items (useful when you want to set 0 padding/margin to the last container) */ 

/* --- Item block for each item group --- */ 
div.catItemView {padding:4px;} /* this is the item container for this view - we add a generic padding so that items don't get stuck with each other */ 

/* Additional class appended to the element above for further styling per group item */ 
div.groupLeading {} 
div.groupPrimary {} 
div.groupSecondary {} 
div.groupLinks {padding:0;margin:0;} 

div.catItemIsFeatured {background:#ddd;border:1px dotted; padding:3px;margin:1px;} /* Attach a class for each featured item */ 

所以，我喜欢右侧的样子。谢谢！

Answer 1

CSS之所以无法达到理想效果，是因为CSS只关心水平位置，即一切水平先布置，然后垂直布置。因此，后续行上的下一个浮动只会位于第一行float中最高的元素下方，因此当前一行浮动具有较短高度的容器时，会留下未填充的垂直空间。

我建议jQuery的砌体:) http://masonry.desandro.com/

Answer 2

您可以使用column-count达到所需要的样子。请记住，这些项目的顺序与浮动时的顺序不同。

浮子：

1 2 
3 4 
5 6 

列：

1 4 
2 5 
3 6 

要找项目的父亲集column-count: 2。

注意，它不能在所有的浏览器：http://caniuse.com/#search=column