Question

我有一个响应式流体设计组合，有3列。我找不到问题的CSS出了点问题。

如果我连续有3个项目，它看起来很好。但是，如果最后一项在仅有1列或2列的行上结束，则整个格式会失真。通过调整浏览器大小可以看出这一点。

如果你能帮助我找到针对此的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

哇，哇，神圣注册商标蝙蝠侠！我会放一个

<sup>&reg;</sup>

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

为什么你有这么多只有一个项目的名单？你也有一些未定义的款式，但我认为你最大的问题是你有物品

<li>

在包含元素不是时浮动。

尝试浮动.portfolio-three-item，然后清除其中的内容。在非浮动元素中浮动元素（不使用清算类或

<br clear="all" />

混淆了浏览器，看起来不需要浮动任何内容。

Answer 2

我能够使用简单的jQuery来实现这一点，以获取页面加载时图像的高度，并在css中声明高度，然后在窗口调整大小时获取图像的高度，并在css中重新声明它

$ j（文件）.ready（function（）{

// Set portfolio image item height after images load, 

        $j(".mosaic-backdrop img").load(function(){
         var portfolioItemHeight =  $j(".mosaic-backdrop img").height();
         $j(".portfolio-three-item").css("height", portfolioItemHeight);
        });
// reset portfolio image item height each time window is maximized

        if(screen.width > 1200) {
            $j(".mosaic-backdrop img").load(function(){
             var portfolioItemHeight =  $j(".mosaic-backdrop img").height();
             $j(".portfolio-three-item").css("height", portfolioItemHeight);
            });

        }
// reset portfolio image item height each time window is resized

        $j(window).resize(function() {
         var portfolioItemHeightReized =    $j(".mosaic-backdrop img").height();
         $j(".portfolio-three-item").css("height", portfolioItemHeightReized);
     });

     });

谢谢你，@ kristina孩子，帮助我意识到高度设置不正确！

3柱流体分区显示毛刺：“悬挂”个别分区

2 个答案: