jquery - 当段落到达 Div 底部时创建新列

Question

因此，我有一个具有固定高度和占据整个屏幕宽度的宽度的 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;
} 

Answer 1

$(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、Firefox、Safari 和 Opera。然后，您可以根据自己的需要对其进行操作。