| | Дизайн в три колонки (страница http://wowa55.pz9.ru/ind-78.html, код в конце поста ) прекрасно воспроизводится во всех браузерах и на планшете, а вот на смартфоне возникает странная ситуация.
Если телефон расположен горизонтально, то все нормально (скриншот).
А если телефон расположен вертикально, то в средней колонке текст вытягивается в узкий столбик и справа пусто (скриншот).
Чем это можно объяснить и как исправить?
<!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>
|
| |
