Странный дефект мобильной верстки

@vlad-55 · Регистрация: 21.02.2009

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

Дизайн в три колонки (страница http://wowa55.pz9.ru/ind-78.html, код в конце поста ) прекрасно воспроизводится во всех браузерах и на планшете, а вот на смартфоне возникает странная ситуация.

Если телефон расположен горизонтально, то все нормально (скриншот).

А если телефон расположен вертикально, то в средней колонке текст вытягивается в узкий столбик и справа пусто (скриншот).

Чем это можно объяснить и как исправить?

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
    <html>
    <head>
<title>Проверка верстки. </title>
<meta name="description" content="Бизнес ">
<meta name="keywords" content="Россия">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
 
 
<style>
 
/* ОЧИЩАЕМ УСТАНОВКИ БРАУЗЕРА ПО УМОЛЧАНИЮ */
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: middle;
background: transparent; 
font:15px Arial,sans-serif;
}
 
 
#Contour_page {max-width:1000px; margin:0 auto; padding: 1%; background-color:#FFF;}
 
#Topgallant {margin:0 auto; background-color: #CC3;}
 
#Left_column{width:28%; display:table-cell; vertical-align:top; background-color:#9FF}
#Central_column{width:50%; display:table-cell; vertical-align:top; padding: 0 2% 0 2%; background-color: #FCF}
#Right_column{width:20%;display:table-cell; vertical-align:top; background-color:#FF9}
 
.text_p {font-size:100%; text-indent:7%; text-align:justify; }
 
 
</style>
 
</head>
 
<body>
 
<div id="Contour_page">
 
<div id="Topgallant">
Верхнее меню
</div> <!-- Конец верхнего блока --> 
 
 
    <div id="Content">
        <div id="string_content">
            <ul>
                <li id="Left_column"> <!-- Начало кода левой колонки -->
              
    <div class="text_p"> <!-- Начало текста О клубе --> 
<p>Это текст о нашем клубе. Это текст о нашем клубе. 
    </div> <!-- Конец текста О КЛУБЕ -->
                    
                </li> <!-- Конец кода левой колонки -->
 
                
                <li id="Central_column">  <!-- Начало кода средней колонки -->
 
    <div class="text_p">
<p>Материалы публикуются на сайте в следующем порядке.</p>
<p>Сначала их пишут, потом исправляют ошибки, потом регистрируют, потом модерируют, потом публикую и уже после всего этого их читают.</p>
    </div>    
               
                </li> <!-- Конец кода средней колонки -->
 
                
                <li id="Right_column">  <!-- Начало кода правой колонки -->
 
    <div class="text_p">
<p>Вы можете пригласить друзей. Вы можете пригласить друзей. </p>
    </div>
    
                </li> <!-- Конец кода правой колонки -->
 
 
 
</div> <!-- Конец страницы -->
 
 
</body>
</html>

@vlad-55 · 07.01.2014, 15:06 **[ТС]**

Закрыл незакрытый тег:

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
    <html>
    <head>
<title>Проверка верстки. </title>
<meta name="description" content="Бизнес ">
<meta name="keywords" content="Россия">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
 
 
<style>
 
/* ОЧИЩАЕМ УСТАНОВКИ БРАУЗЕРА ПО УМОЛЧАНИЮ */
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: middle;
background: transparent; 
font:15px Arial,sans-serif;
}
 
 
#Contour_page {max-width:1000px; margin:0 auto; padding: 1%; background-color:#FFF;}
 
#Topgallant {margin:0 auto; background-color: #CC3;}
 
/* КОНТЕНТ ВЦЕЛОМ */
#Content {margin: 0 auto; padding-top:0; display:table;}
#string_content ul {display:table-row;}
 
#Left_column{width:28%; display:table-cell; vertical-align:top; background-color:#9FF}
#Central_column{width:50%; display:table-cell; vertical-align:top; padding: 0 2% 0 2%; background-color: #FCF}
#Right_column{width:20%;display:table-cell; vertical-align:top; background-color:#FF9}
 
.text_p {font-size:100%; text-indent:7%; text-align:justify; }
 
 
</style>
 
</head>
 
<body>
 
<div id="Contour_page">
 
<div id="Topgallant">
Верхнее меню
</div> <!-- Конец верхнего блока --> 
 
 
    <div id="Content">
        <div id="string_content">
            <ul>
                <li id="Left_column"> <!-- Начало кода левой колонки -->
              
    <div class="text_p"> <!-- Начало текста О клубе --> 
<p>Это текст о нашем клубе. Это текст о нашем клубе. 
    </div> <!-- Конец текста О КЛУБЕ -->
                    
                </li> <!-- Конец кода левой колонки -->
 
                
                <li id="Central_column">  <!-- Начало кода средней колонки -->
 
    <div class="text_p">
<p>Материалы публикуются на сайте в следующем порядке.</p>
<p>Сначала их пишут, потом исправляют ошибки, потом регистрируют, потом модерируют, потом публикую и уже после всего этого их читают.</p>
    </div>    
               
                </li> <!-- Конец кода средней колонки -->
 
                
                <li id="Right_column">  <!-- Начало кода правой колонки -->
 
    <div class="text_p">
<p>Вы можете пригласить друзей. Вы можете пригласить друзей. </p>
    </div>
    
                </li> <!-- Конец кода правой колонки -->
        </ul>
 
    </div> <!-- Конец id="string_content" -->
    </div> <!-- Конец id="Content" -->
     
 
</div> <!-- Конец id="Contour_page", Конец страницы -->
 
 
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ
Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .	Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .