Как вывести рядом два списка?

@CyberIslam · Регистрация: 21.02.2013

Студворк — интернет-сервис помощи студентам

Доброго дня, господа. Один список разделить на несколько колонок я научился, и делается это вот таким классом:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
 .column {
    -webkit-column-width:300px;
    -moz-column-width: 300px;
    column-width: 300px;
    -webkit-column-count: auto;
    -moz-column-count: auto;
    column-count: auto;
    -webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    column-gap: 30px;
    -webkit-column-rule: 1px solid #ccc;
    -moz-column-rule: 1px solid #ccc;
    column-rule: 1px solid #ccc;
   }

Но мне нужно два списка расположить рядом, причем таким образом, чтобы в случае "непомещения" второй список спустился под первый. Я пытался это сделать с помощью описанного мною класса column, но тогда оба списка сливаются и из общего списка образуются две колонки. Это не удобно если в первом списке 15 элементов, а во втором - 11. Предложите идеи пожалуйста

@Freeze_Breeze · 09.11.2017, 15:23

CyberIslam, Вы используете bootstrap?

@CyberIslam · 09.11.2017, 16:02 **[ТС]**

Знать бы что это такое, Freeze_Breeze)))

Добавлено через 4 минуты
Это что то вроде CMS что ли? Я использую joomla

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

Добавлено через 41 секунду
Что то в последнее время мне модераторы перестали отвечать... Что случилось, уважаемые модераторы?

@Freeze_Breeze · 09.11.2017, 16:22

CyberIslam, Bootstrap это фреймворк. Более подробно можете прочитать английская версия, русская версия.

Сообщение от CyberIslam

Что то в последнее время мне модераторы перестали отвечать... Что случилось, уважаемые модераторы?

Не всегда у них времени хватает.
А что на счет примера, вот такое вам нужно?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="container">
    <div class="row_one">
        <nav class="menu_one">
            <ul>
                <li><a href="#">List item 1</a></li>
                <li><a href="#">List item 2</a></li>
                <li><a href="#">List item 3</a></li>
                <li><a href="#">List item 4</a></li>
                <li><a href="#">List item 5</a></li>
            </ul>
        </nav>
    </div>
    <div class="row_two">
        <nav class="menu_two">
            <ul>
                <li><a href="#">List item 6</a></li>
                <li><a href="#">List item 7</a></li>
                <li><a href="#">List item 8</a></li>
                <li><a href="#">List item 9</a></li>
                <li><a href="#">List item 10</a></li>
            </ul>
        </nav>
    </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
body {
    font-size: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Philosopher';
}
 
.container {
    max-width: 1500px;
    width: 100%;
    height: auto;
    margin: 0 auto;
}   
 
.menu_one {
    float: left;
}
.menu_two {
    float: right;
}
 
.menu_one ul li,
.menu_two ul li {
    list-style: none;
    font-size: 18px;
    float: left;
}
 
.menu_one a,
.menu_two a {
    padding-left: 15px; 
}

Добавлено через 2 минуты
Codepen

@CyberIslam · 09.11.2017, 17:38 **[ТС]**

Именно так, Freeze_Breeze, А будет ли оно отображаться к примеру в одном столбике в мобильной версии?

@Freeze_Breeze · 09.11.2017, 17:53

CyberIslam, в смысле так?

@CyberIslam · 09.11.2017, 18:06 **[ТС]**

Да, вот так. Благодарю Вас за помощь, я непременно испытаю его в действии и отпишусь о результатах

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	09.11.2017, 15:23
	CyberIslam, Вы используете bootstrap? 0

@CyberIslam 21 / 14 / 5 Регистрация: 21.02.2013 Сообщений: 713
	09.11.2017, 16:02 [ТС]
	Знать бы что это такое, Freeze_Breeze))) Добавлено через 4 минуты Это что то вроде CMS что ли? Я использую joomla Добавлено через 54 секунды Я могу списки выводить с помощью модулей, но все равно, даже в модулях они ведут себя именно так, как я описал Добавлено через 41 секунду Что то в последнее время мне модераторы перестали отвечать... Что случилось, уважаемые модераторы? 0

@CyberIslam 21 / 14 / 5 Регистрация: 21.02.2013 Сообщений: 713
	09.11.2017, 17:38 [ТС]
	Именно так, Freeze_Breeze, А будет ли оно отображаться к примеру в одном столбике в мобильной версии? 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	09.11.2017, 17:53
	CyberIslam, в смысле так? Миниатюры 0

@CyberIslam 21 / 14 / 5 Регистрация: 21.02.2013 Сообщений: 713
	09.11.2017, 18:06 [ТС]
	Да, вот так. Благодарю Вас за помощь, я непременно испытаю его в действии и отпишусь о результатах 0

Как вывести рядом два списка?

Решение