Попытка создать столбцы HTML CSS

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

Я хочу сделать так, чтобы размер столбца был разным для каждого размера браузера. Я пытался сделать это с помощью подсчета столбцов, но я не вижу 3 столбца, они все еще вертикальные.

Например 900–1280 пикселей: отображение в 3 столбца. 700–900 пикселей: отображение в 2 столбца. Ниже 700 пикселей: вертикально, как сейчас.

Изображение 3 столбца: введите описание изображения здесь

div h1{
    font-size: 2em;
}

li[data-offered-fall=yes]::before {
            font-family: FontAwesome;
            font-size: 0.75em;
            content: "\2705";
            display: inline-block;
            padding-left: 0.25em;
            color:red;
}

li[data-offered-fall=yes]::after {
            font-family: FontAwesome;
            font-size: 0.75em;
            content: li;
            display: inline-block;
            padding-left: 0.25em;
            color:red;
}

@media screen and (max-width: 1280px)
{
    li{
        column-count: 3;
    }
}

@media screen and (max-width: 900px)
{
    li{
        column-count: 2;
    }
}

@media screen and (max-width: 700px)
{
    li{
        column-count: 1;
    }
}

<div>
            <li data-title = "Multimedia and the World Wide Web" data-offered-fall = "yes">HCI 201</li>	
            <li data-title = "Formatting Digital Pages II" data-offered-fall = "no">HCI 271</li>	
            <li data-title = "Foundations of Digital Design" data-offered-fall = "no">HCI 302</li>	
            <li data-title = "Analysis and Design for Human-Computer Interaction" data-offered-fall = "no">HCI 312</li>	
            <li data-title = "Usability Issues for Electronic Commerce" data-offered-fall = "no">HCI 341</li>	
            <li data-title = "Usability in Computing Systems" data-offered-fall = "no">HCI 350</li>	
            <li data-title = "Foundations of Digital Design" data-offered-fall = "yes">HCI 402</li>	
            <li data-title = "Web Site Design forHCI" data-offered-fall = "yes">HCI 406</li>	
            <li data-title = "Designing for Content Management Systems" data-offered-fall = "no">HCI 421</li>	
            <li data-title = "Multimedia" data-offered-fall = "no">HCI 422</li>	
            <li data-title = "Internet Multimedia" data-offered-fall = "no">HCI 423</li>	
            <li data-title = "Prototyping and Implementation" data-offered-fall = "yes">HCI 430</li>	
            <li data-title = "User-Centered Web Development" data-offered-fall = "no">HCI 432</li>	
            <li data-title = "Introduction to User-Centered Design" data-offered-fall = "yes">HCI 440</li>	
            <li data-title = "Introduction to User-Centered Development" data-offered-fall = "no">HCI 441</li>	
            <li data-title = "Inquiry Methods and Use Analysis" data-offered-fall = "yes">HCI 445</li>	
            <li data-title = "Foundations of Human-Computer Interaction" data-offered-fall = "yes">HCI 450</li>	
            <li data-title = "Interaction Design and Information Architecture" data-offered-fall = "yes">HCI 454</li>	
            <li data-title = "Information Architecture and Content Strategy" data-offered-fall = "no">HCI 457</li>	
            <li data-title = "Usability Evaluation Methods" data-offered-fall = "yes">HCI 460</li>	
            <li data-title = "Digital Design" data-offered-fall = "yes">HCI 470</li>	
            <li data-title = "Accessibility and Design for Diverse Users" data-offered-fall = "yes">HCI 511</li>	
            <li data-title = "Information Visualization and Infographics" data-offered-fall = "no">HCI 512</li>	
            <li data-title = "Design/Strategies for Internet Commerce" data-offered-fall = "no">HCI 513</li>	
            <li data-title = "Global User Research" data-offered-fall = "no">HCI 514</li>	
            <li data-title = "Design Ethnography" data-offered-fall = "no">HCI 515</li>	
            <li data-title = "Learner-Centered Design" data-offered-fall = "no">HCI 520</li>	
            <li data-title = "UX Strategy and Web Analytics" data-offered-fall = "no">HCI 522</li>	
            <li data-title = "Mobile Design" data-offered-fall = "no">HCI 530</li>	
            <li data-title = "Embodied Interaction" data-offered-fall = "no">HCI 545</li>	
            <li data-title = "Social Interaction Design" data-offered-fall = "no">HCI 553</li>	
            <li data-title = "Interaction Design and Analysis" data-offered-fall = "no">HCI 558</li>	
            <li data-title = "User Experience Design Practicum" data-offered-fall = "no">HCI 580</li>	
            <li data-title = "Topics in Human-Computer Interaction" data-offered-fall = "yes">HCI 590</li>	
            <li data-title = "Human-Computer Interaction Capstone" data-offered-fall = "yes">HCI 594</li>	
            <li data-title = "CI Research Capstone" data-offered-fall = "no">HCI 596</li>	
        </div>

Ваш HTML-код недействителен. <li> не может быть ребенком <div>.

— 18.05.2019 03:52

html css column-count

18.05.2019 03:28

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это просто, потому что вы используете столбец css в li, а не div, который стал контейнером li.

так что вы должны сделать, добавьте класс div и напишите код css div с количеством столбцов.

@media screen and (max-width: 1280px)
{
    .container{
        column-count: 3;
    }
}

@media screen and (max-width: 900px)
{
    .container{
        column-count: 2;
    }
}

@media screen and (max-width: 700px)
{
    .container{
        column-count: 1;
    }
}

Здесь рабочий пример. Если вы правильно прочитаете пример школы w3, вы его получите. А вот описание количества столбцов на w3, не забудьте добавить webkit и mozz

Браузеры не нуждались в префиксах поставщиков, начиная с версии 50 и старше.

— 18.05.2019 03:54

ах, ты прав, тьфу, у меня все еще есть плохая привычка использовать что-то вроде этого. Спасибо

— 18.05.2019 03:59

18.05.2019 03:44