0

我有一个包含 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;
}
4

2 回答 2

0

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

<sup>&reg;</sup>

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

为什么你有这么多只有一个项目的列表？你还有一些没有定义的样式，但我认为你最大的问题是你里面有物品

<li>

浮动，而包含的元素不浮动。

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

<br clear="all" />

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

于 2012-06-04T23:56:43.177 回答
0

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

$j(文档).ready(函数() {

// 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 childs，感谢您帮助我意识到高度设置不正确！

于 2012-06-05T19:18:18.273 回答