0

我有一个带有 K2 组件的 Joomla 站点。而且我的“问题”看起来很糟糕。请看图片：

css box foating问题

这是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 */

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

4

2 回答 2

0

CSS之所以没有达到预期的效果，是因为CSS只关心水平位置，即所有东西都是先水平布局，再垂直布局。因此，后续行上的下一个浮动将仅位于第一行浮动中最高元素的下方，因此当前一行浮动具有较短高度的容器时，会留下未填充的垂直空间。

我推荐 jQuery Masonry :) http://masonry.desandro.com/

于 2013-02-23T12:44:25.247 回答
0

您可以使用它column-count来实现所需的外观。请记住，项目的顺序将与您浮动时不同。

漂浮：

1 2
3 4
5 6

列：

1 4
2 5
3 6

只需column-count: 2在项目的父项上设置。

请注意，它不适用于所有浏览器：http ://caniuse.com/#search=column

于 2013-02-23T12:50:31.300 回答