當段落達到Div的底部時創建新的列

所以，我有一個固定高度的div，並且寬度佔據了整個屏幕的寬度。我的目標是在添加太多內容時讓div橫向滾動。當段落達到Div的底部時創建新的列

段落內部還有一個更瘦的固定寬度。

我想要做的是讓任何段落或內容在達到Div的底部時開始一個新的「列」。有沒有辦法做到這一點與jQuery或類似的東西？

.divClass { 
    width: 100%; 
    height: 50%; 
    border: 3px solid black; 
    position: absolute; 
    top: 25%; 
    left: 0px; 
    right: 0px; 
    clear: both; 
    background-size: 50%; 
    overflow-y:hidden; 
    overflow-x: scroll; 
    padding-left: 80px; 
} 

.divClass p { 
    width: 360px; 
}

來源

2014-02-18 Trackrise

我認爲['column-fill']（https://developer.mozilla.org/en-US/docs/Web/CSS/column-fill）CSS屬性（加上'overflow-x'）做了什麼你想要的，但不幸的是，它只能通過Firefox中的供應商前綴來支持。這可能需要服務器端或JavaScript處理。 – ajp15243

請參閱http://jsfiddle.net/LB7VA/以獲得最佳快速嘗試。不應該使用'$ .each'，而是使用while循環進行迭代，以便在高度結束時將單詞切分回數組。此外，不知道我有高度工作按預期。 – sberry

這就是你要求的http://jsfiddle.net/xPdD7/8/ – 3bu1

$(document).ready(function(){ 

function makeColumns(elementSelector,numOfColumns){ 
var caracCount = $(elementSelector).html().replace(/ /g,'').length; 

var caracCountColmuns = Math.ceil((caracCount/numOfColumns).toFixed(1)) ; 

    $(elementSelector).css({ 
     '-moz-column-count':caracCountColmuns, /* Firefox */ 
     '-webkit-column-count':caracCountColmuns, /* Safari and Chrome */ 
     'column-count':caracCountColmuns, 
    }); 

} 

makeColumns(".divClass p",300); // Call this anywhere makeColumns("elementToManipulate",HEIGHT OF EACH BLOCK) 
});

我已經在這裏完成您的解決方案， MakeColumns()這僅適用於IE10 +，Chrome瀏覽器，火狐，Safari和Opera。然後，您可以將其操作到您想要的任何地方。

來源

2014-02-18 07:42:41 Wandile

當段落達到Div的底部時創建新的列

回答

相關問題