Умные динамические колонки с применением CSS и jQuery
Существует два типа колонок, используемых на веб-сайтах: фиксированной ширины и тянущиеся в ширину в зависимости от размера экрана (их еще называют "резиновыми"). Недостатком фиксированных колонок при их использовании в "резиновом" блоке является то, что может появляться лишнее незаполненное пространство (при определенной ширине блока), поскольку его ...
Комментарии (54)
Дмитрий, спасибо большое за инфу. Создал колонки с помощью вашего способа и скинул файлы 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;}, поэтому при сужении экрана избыточный текст «проваливается» через нижние границы колонок. В моем случае колонки подчиняются закону таблицы и этого не происходит.
Если данный метод пригодится вам или кому-то из посетителей вашего бога, то буду только рад…
А как разбить на колонки простой текст (с определённым кол-вом строк)? Это вообще возможно?