css - 3 列流体分区显示故障 : "Hanging" Individual Divs

Question

我有一个包含 3 列的响应式流体设计组合。我无法查明的 CSS 有问题。

如果我正好有 3 个连续的元素，它看起来很好。但是，如果最后一项以只有 1 或 2 列的行结尾，那么整个格式就会失真。这可以通过调整浏览器大小来查看。

如果您能帮我查明 CSS 修复方法，我将不胜感激。

示例页面在这里:http://bit.ly/KzfN2g

我相信这是导致问题的主要 css 样式，但我可能是错的:

 .mosaic-block-three {
    margin-right:3%;
    width:29.3%;
    background:url("../img/progress.gif") no-repeat scroll center center #F5F5F5;
    border:1px solid #FFFFFF;
    box-shadow:0 0 4px 0 #888888;
    float:left;
    margin:10px 40px 30px 0;
    overflow:hidden;
    position:relative;
    width:291px;
}

Answer 1

哇哦，神圣的注册商标 bat 侠!我会放一个

<sup>&reg;</sup> 

如果我是你 :) 但对于手头的问题...

为什么你有这么多列表只有一个元素？你还有一些未定义的样式，但我认为你最大的问题是你有元素在

<li>

是 float 的，而包含的元素不是。

尝试 float .portfolio-three-item 然后清除其中的内容。在非 float 元素中有 float 元素(不使用清除类或

<br clear="all" /> 

使浏览器感到困惑，并且看起来好像没有任何内容需要 float 。