Question

我正在制作一个水平内容的网站。我的问题是，为了使内容水平，我被迫在内容上使用内联块。内容只是图像，将分为两个不同的高度，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;
        }

如果在内联块元素上有足够的高度，则强制断行

1 个答案: