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

Question

我正在制作一个包含横向内容的网站。我的问题是，为了让内容水平显示，我不得不在内容上使用内联 block 。内容只是图像，将有两种不同的高度，620 和 305 像素。

网站看起来像这样: http://jsfiddle.net/alekks/2uBLG/

正如您所看到的那样，小图片排成一行，但是，由于有足够的空间让小图片相互堆叠，我希望他们这样做。IE。当有小图片时，内联规则不适用，希望它看起来像这样:

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

但是，如果我以小类为目标并拿走属性(property)或试图打破这条线:之后，它只会打破整条线，它们最终会出现在大图像下。

有人对解决方案有任何想法吗？ 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;
        }