Главная JavaScript

Умные динамические колонки с применением CSS и jQuery

Умные динамические колонки с применением CSS и jQuery

Существует два типа колонок, используемых на веб-сайтах: фиксированной ширины и тянущиеся в ширину в зависимости от размера экрана (их еще называют "резиновыми"). Недостатком фиксированных колонок при их использовании в "резиновом" блоке является то, что может появляться лишнее незаполненное пространство (при определенной ширине блока), поскольку его ...

Комментарии (54)

  1. Дмитрий, спасибо большое за инфу. Создал колонки с помощью вашего способа и скинул файлы html, css и js себе в папку-«заначку». У меня уже коллекция заготовок с различными способами реализации «резины». Если вас заинтересует, то есть еще один интересный способ реализации вашего примера html. Фактически берем за основу вашу разметку. Только в таблице стилей для списка (ul и li) прописываем свойства таблицы. Конкретно:

    ul { display: table-row; width: указываем нужную ширину;}

    ul li {display: table-cell;}

    .block {display: table-cell;
    width: указываем ширину ul. Благодаря этому все блоки равномерно распределяются по горизонтали;}

    Для родителя ul. column (у вас его нет) прописываем max-width, min-width и нужные величины border-spacing (задает отступы между ячейками-колонками сверху и снизу.

    Это все. Прописал только те функции, на которых нужно акцентировать внимание. Все эти background и прочее указывается индивидуально.

    Преимущества этого способа:
    1) одинаковая высота и ширина всех колонок;
    2) в каждую колонку-ячейку можно ввести любой объем контента. Если это будет текст (разный объем в разных колонках), то при сужении экрана браузера колонки будут синхронно менять свой размер, подстраиваясь под самую большую;
    3) при сужении экрана текст, объем которого будет превышать размеры колонок, будет давить на нижнюю границу колонки, автоматически растягивая ее вниз.

    Этого невозможно добиться, если указать высоту колонки или ее родителя. У вас указана высота. block {height: 355px;}, поэтому при сужении экрана избыточный текст «проваливается» через нижние границы колонок. В моем случае колонки подчиняются закону таблицы и этого не происходит.

    Если данный метод пригодится вам или кому-то из посетителей вашего бога, то буду только рад…

  2. А как разбить на колонки простой текст (с определённым кол-вом строк)? Это вообще возможно?

Ваш комментарий