Создание новых столбцов, когда абзац достигает нижней части Div

Question

Создание новых столбцов, когда абзац достигает нижней части Div

0

Итак, у меня есть 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;
}

Trackrise 18 фев. 2014, в 06:31

Источник

0

Я думаю, что CSS-свойство column-fill (плюс overflow-x ) делает то, что вы хотите, но, к сожалению, оно поддерживается только через префикс вендора в Firefox. Это может потребовать обработки на стороне сервера или JavaScript.
ajp15243 18 фев. 2014, в 05:11
0

Смотрите jsfiddle.net/LB7VA для моей лучшей быстрой попытки. Не следует использовать $.each и вместо этого выполнять итерацию с циклом while, чтобы вы могли нарезать слово обратно в массив при превышении высоты. Кроме того, не уверен, что у меня высота работает, как задумано.
sberry 18 фев. 2014, в 05:36
0

это то, что вы спрашиваете jsfiddle.net/xPdD7/8
3bu1 18 фев. 2014, в 05:59

Показать ещё 1 комментарий

Теги:

jquery

html

css

1 ответ

Ещё вопросы

Я думаю, что CSS-свойство column-fill (плюс overflow-x ) делает то, что вы хотите, но, к сожалению, оно поддерживается только через префикс вендора в Firefox. Это может потребовать обработки на стороне сервера или JavaScript.
Смотрите jsfiddle.net/LB7VA для моей лучшей быстрой попытки. Не следует использовать $.each и вместо этого выполнять итерацию с циклом while, чтобы вы могли нарезать слово обратно в массив при превышении высоты. Кроме того, не уверен, что у меня высота работает, как задумано.
это то, что вы спрашиваете jsfiddle.net/xPdD7/8

Wandile · Answer 1 · 2014-02-18T05-10-00.000Z

$(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. Затем вы можете манипулировать этим тем, что хотите.