如果行內塊元素上有足夠的高度，強制斷行

我正在製作一個帶有水平內容的網站。我的問題是，要獲得水平內容，我不得不在內容上使用內聯塊。內容僅爲圖像，並且將具有兩個不同的高度，620和305像素。如果行內塊元素上有足夠的高度，強制斷行

該網站看起來是這樣的： http://jsfiddle.net/alekks/2uBLG/

正如你可以看到的圖片都是一致的，但，因爲有足夠的空間小的堆疊上述對方我希望他們能夠做到這一點。也就是說當有小圖片，內聯規則不應適用，希望它看起來是這樣的：

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

但是，如果我定位之類的小，並採取財產離開或試圖打破行：之後，它只是打破了整個界限，最終在大影像下結束。

任何人有任何解決方案的想法？ jQuery或不是無關緊要，只是想得到它是這樣的:)

希望你明白我的意思。

請隨時索取更多信息。

來源

2012-08-15 alekks

難道這應該是一個動態的佈局，可以有個轉移身邊？如果不是，則將兩個垂直較小的塊嵌套在較大的塊中。然後你讓內部的'display：block'都可以把下一個推到一個新的行上。或者你可以漂浮它們，但是你需要清除它們或者讓容器的溢出屬性處理它。 – TheZ 2012-08-15 21:34:14

感謝您的意見！不，從任何其他意義上講，它不會是動態的 - > 但問題是，這將會變成某種CMS模板，所以我不能單獨進行除CSS選擇器之外的更改級別......也許我誤解了你的解決方案？隨時做你的想法jsfiddle。 – alekks 2012-08-15 22:27:20

嗯，我的確需要一個額外的包裝元素，但只要你知道兩個小圖像即將到來，你可以解釋它。這裏有一個例子：http://jsfiddle.net/wQNSQ/ – TheZ 2012-08-15 23:48:39

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

來源

2014-03-21 01:21:03 alekks

如果行內塊元素上有足夠的高度，強制斷行

回答

相關問題