浮動框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