• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Разделение текста на колонки при помощи CSS (Как разделить текст из одной или нескольких ячеек)
Разделение текста на колонки при помощи CSS
Kosten
Дата: Суббота, 2018-07-21, 21:08 | Сообщение 1
Администраторы
Сообщений:18863
Награды: 55


Для того, что бы вы смогли разделить список с элементами или к примеру текст на несколько колонок, то вам безусловно нужно использовать свойство column-count. Так как при обновлении Div раздел столбцов этого кода больше не работает корректно. Вы все еще можете использовать стиль для своих сообщений, но чтобы изменить количество столбцов, я настоятельно рекомендую вам перейти к использованию CSS. Где вам предоставлен полностью рабочий рецепт по разделению списков.

Есть несколько способов сделать это, что даже можно сделать с PHP, но думаю мало кому нравится возиться, когда есть гораздо легкий и актуальный способ. Итак, это полностью CSS решение с некоторыми замечательными небольшими фрагментами, которые вы также сможете использовать в других местах.



CSS

Код
.column {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}


Здесь нужно понимать, что сами списки и комбинирование полей могут быть связанными, и также несвязанными элементами управления. Так как элементы управления могут искать значения в фиксированном списке, который вы вводите сами, или они могут искать значения в таблице или запросе.

Свойство CSS указывает идеальную ширину столбца в много колоночном макете. Контейнер будет иметь столько столбцов, сколько может, без каких-либо из них, имеющих ширину меньше значения. Это свойство может помочь вам создать гибкие конструкции, соответствующие различным размерам экрана. Особенно при наличии свойства column-count, которое имеет приоритет, вы должны указать все соответствующие значения длины для достижения точной ширины столбца.



Также можно раскидать по спискам:

HTML

Код
<p class="content-box">
Здесь ваше описание
</p>


CSS

Код
.content-box {
  column-width: 293px;
}


Демонстрация

Указывает оптимальную ширину столбца, это фактическая ширина столбца может отличаться от заданного значения, так как она может быть более широкой, когда необходимо, чтобы заполнить свободное пространство, и уже, когда доступное пространство слишком мало. Значение должно быть строго положительным или объявление недействительно.

Также можете сделать перегородку по колонкам:



Все тоже самое, можно сказать антологичное, только при разделение текста на колонки, здесь мы еще добавляем дизайн. чтоб визуально красиво и понятно смотрелось.

HTML

Код
<p>Здесь ваш текст</p>


CSS

Код
p {
    column-count: 3;
    column-rule-style: solid;
    column-rule-color: #168c10;
}


Демонстрация

Как можете видеть, что цвет сами самостоятельно можете выбрать пол свою стилистику сайта.
Прикрепления: 6337271.png(11.2 Kb) · 0284779.png(19.1 Kb) · 2221300.jpg(30.4 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Разделение текста на колонки при помощи CSS (Как разделить текст из одной или нескольких ячеек)
  • Страница 1 из 1
  • 1
Поиск: