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。然后，您可以将其操作到您想要的任何位置。

当段落到Div的底部时创建新列

1 个答案: