css - 如果 inline-block 元素上有足够的高度，则强制换行

Question

我正在制作一个具有水平内容的网站。我的问题是，为了使内容水平，我不得不在内容上使用 inline-block。内容只是图像，将有两个不同的高度，620 和 305 像素。

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

正如你所看到的，小图片是排成一行的，但是，因为有足够的空间让小图片堆叠在一起，所以我希望他们这样做。即当有小图片时，内联规则不应该适用，希望它看起来像这样：

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

但是，如果我以小班级为目标，将财产拿走或试图打破界限：之后，它只会打破整条界限，它们最终会出现在大图像之下。

有人对解决方案有任何想法吗？jQuery 与否无关紧要，只想像这样得到它:)

希望你明白我的意思。

请随时询问更多信息。

Answer 1

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;
        }