css - 如果行内块元素上有足够的高度，则强制折断线

我正在制作一个包含横向内容的网站。我的问题是，要使内容水平，我不得不在内容上使用内联块。内容只是图像，将处于620和305像素两个不同的高度。

该网站如下所示：
http://jsfiddle.net/alekks/2uBLG/

正如您所看到的，小图片排成一列，但是，由于有足够的空间让小图片彼此叠放，我希望它们能够做到这一点。
即当有小图片时，不应应用内联规则，希望它看起来像这样：

 _____  _____________  _____  __
|     ||             ||     ||  |
|     ||             ||_____||__|
|     ||             ||     ||  |
|_____||_____________||_____||__|

但是，如果我将目标定位为较小的类并删除该属性或试图打破界限：之后，它只会破坏整个界限，最终落到大图之下。

有人对解决方案有任何想法吗？ jQuery是否无关紧要，只想这样获得它即可：)

希望你明白我的意思。

请随时询问更多信息。

最佳答案

jQuery能够根据图像的大小来指定不同的类。

jQuery(document).ready(function() {
    var set = jQuery('#content > img');
    for(var i = 0, len = set.length; i < len; i += 1){
        set.slice(i, i+1).wrapAll('<div class="postImg" />');
    };

    var set = jQuery('.size-thumbnail');
    for(var i = 0, len = set.length; i < len; i += 2){
        set.slice(i, i+2).wrapAll('<div class="smallImgWrap" />');
    };
});

CSS：

#content{
        white-space: nowrap;
    }
    #content .postImg{
        height: 100%;
        display: inline-block;
    }
        .postImg > img{
            width: auto;
        }

    .smallImgWrap{
        display: inline-block;
    }
        .smallImgWrap img{
            display:block !important;
            float:none;
        }