Как сделать меню в две колонки, без таблиц

@artur737 · Регистрация: 16.02.2015

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

Доброго времени суток. Подскажите пожалуйста как сделать такое же меню без таблиц ? особенно интересно, как так же сделать такой же разделитель между колонками.

Как сделать меню в две колонки, без таблиц

@Resume · 20.02.2016, 00:04

Можно вот таким образом:

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
25
26
27
28
29
<!DOCTYPE HTML >
<head>
<meta charset=utf-8">
<title>Example</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>    
<div class="container">
 <div class="block1">
  <img src="#" alt="" /><h1>Заголовок</h1>
 <ul>
 <li><img src="#" alt="" /><a href="#">Текст</a></li>
 <li><img src="#" alt="" /><a href="#">Текст</a></li>
 <li><img src="#" alt="" /><a href="#">Текст</a></li>
 <li><img src="#" alt="" /><a href="#">Текст</a></li>
 </ul>
 </div>
 <div class="block2">
 <img src="#" alt="" /><h1>Заголовок</h1>
 <ul>
 <li><img src="#" alt="" /><a href="#">Текст</a></li>
 <li><img src="#" alt="" /><a href="#">Текст</a></li>
 <li><img src="#" alt="" /><a href="#">Текст</a></li>
 <li><img src="#" alt="" /><a href="#">Текст</a></li>
 </ul>
 </div>
 </div>
</body>
</html>

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
34
35
36
37
38
39
40
41
body{
margin:0;
padding:0;
}
 
.container{
background:rgb(247,247,247);
height:auto;
overflow:hidden;
width:100;
}
 
.block1,.block2{
display:inline-block;
padding-left:50px;
}
 
.block1{
border:1px solid rgb(234,235,235);
width:40%;
}
 
.block2{
width:50%;
}
 
ul a{
display:block;
}
 
ul li{
list-style-type:none;
}
 
h1{
text-decoration:underline;
}
 
h1,img{
display:inline-block;
}

@Andrey PSt · 20.02.2016, 06:25

Альтернатива Таблицам для div это CSS display: table-cell;

@artur737 · 20.02.2016, 11:28 **[ТС]**

Resume, в два столбика почему то не встает, один под другим

@jade · 20.02.2016, 14:45

Проще всего сделать такое разделение на колонки с помощью css columns, но оно не очень кроссбраузерно. Либо флоатами.

@Resume · 20.02.2016, 15:37

artur737,
измените внутренний левый отступ с 50px на 2%:

CSS
1
padding-left:2%;

Новые блоги и статьи Все статьи Все блоги /
Программный отбор элементов справочника Номенклатура по группе 1С Maks 22.03.2026 Установка программного отбора элементов справочника "Номенклатура" из модуля формы документа. В качестве фильтра для отбора справочника служит группа номенклатуры. Отбор под наименованию группы (на. . .	Как я обхитрил таблицу Word Alexander-7 21.03.2026 Когда мигает курсор у внешнего края таблицы, и нам надо перейти на новую строку, а при нажатии Enter создается новый ряд таблицы с ячейками, то мы вместо нервных нажатий Энтеров мы пишем любые буквы. . .	Krabik - рыболовный бот для WoW 3.3.5a AmbA 21.03.2026 без регистрации и смс. Это не торговля, приложение не содержит рекламы. Выполняет свою непосредственную задачу - автоматизацию рыбалки в WoW - и ничего более. Однако если админы будут против -. . .	Программный отбор элементов справочника Сотрудники по перечислениям 1С Maks 21.03.2026 Установка программного отбора элементов справочника "Сотрудники" из модуля формы документа. В качестве фильтра для отбора служит предопределенное значение перечислений. Процедура. . .
Переходник USB-CAN-GPIO Eddy_Em 20.03.2026 Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .	Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .

@artur737 0 / 0 / 0 Регистрация: 16.02.2015 Сообщений: 64

	Как сделать меню в две колонки, без таблиц 19.02.2016, 18:00. Показов 8813. Ответов 5 Метки нет (Все метки) Доброго времени суток. Подскажите пожалуйста как сделать такое же меню без таблиц ? особенно интересно, как так же сделать такой же разделитель между колонками. 0

@Andrey PSt 174 / 172 / 34 Регистрация: 23.12.2015 Сообщений: 300 Записей в блоге: 3
	20.02.2016, 06:25
	Альтернатива Таблицам для div это CSS display: table-cell; 0

@artur737 0 / 0 / 0 Регистрация: 16.02.2015 Сообщений: 64
	20.02.2016, 11:28 [ТС]
	Resume, в два столбика почему то не встает, один под другим 0

@jade 23 / 23 / 11 Регистрация: 28.02.2015 Сообщений: 61
	20.02.2016, 14:45
	Проще всего сделать такое разделение на колонки с помощью css columns, но оно не очень кроссбраузерно. Либо флоатами. 0