Вы, ребята, вероятно, сможете ответить на этот вопрос в одно мгновение, но я потратил несколько дней, пытаясь это выяснить.
Я работаю над адаптивным сайтом и хочу, чтобы макет из 3 столбцов изменял ширину как экран изменен. У меня определены 3 деления: слева 20%, в центре 59% и справа 20% (99%). Div форматируются правильно, когда они пусты (одинаковая высота, одинаковое верхнее и нижнее выравнивание). Когда я добавляю меню в 3-й столбец, он сдвигает столбец 3 вниз и выравнивает нижнюю ссылку по нижней части двух других столбцов. Если я изменяю количество ссылок, столбец 3 сдвигается вниз и выравнивает нижнюю часть последней ссылки к нижней части столбцов 1 и 2. Все справочные примеры просты и работают нормально, потому что они очень просты. Код и скриншот прилагаются.
Снимок экрана
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body {
background-color:black;
}
/* Logo Styles */
.divlogo {
width:96%;
height:71px;
background-color: #444;
}
/* Drop Down Menu Styles */
.column1 {
display:inline-block;
width:20%;
height:400px;
background-color:#888;
}
.column2 {
display:inline-block;
width:59%;
height:400px;
background-color:#444;
}
.column3 {
display:inline-block;
width:20%;
height:400px;
background-color:#888;
}
.ddm_menu {
margin-left:auto;
margin-right:auto;
padding:0;
list-style: none;
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
font-size:14px;
width:100%;
}
ul.ddm_menu li {
margin-top:4px;
margin-left:auto;
margin-right:auto;
width:160px;
height:48px;
position:relative;
cursor:pointer;
display:inline-block;
}
.ddm_toplnk {
-moz-box-shadow:0px 0px 16px #fff inset;
-webkit-box-shadow:0px 0px 16px #fff inset;
box-shadow:0px 0px 16px #fff inset;
border-radius: 8px;
}
ul.ddm_menu li > a {
position:absolute;
top:0px;
left:0px;
width:160px;
height:48px;
z-index:12;
}
ul.ddm_menu li span.ddm_wrap{
position:absolute;
top:8px;
left:0px;
width:160px;
height:60px;
z-index:15;
}
ul.ddm_menu li span span.ddm_link {
color:#fff;
font-size:24px;
clear:both;
margin:auto;
}
</style>
</head>
<body>
<center>
<div class="divlogo">
</div>
<hr width="96%">
<div class="column1">
</div>
<div class="column2">
</div>
<div class="column3">
<ul id="ddm_menu" class="ddm_menu">
<li>
<a class="ddm_toplnk" href="#">
<span class="ddm_wrap">
<span class="ddm_link">Home</span>
</span>
</a>
</li>
<li>
<a class="ddm_toplnk" href="#">
<span class="ddm_wrap">
<span class="ddm_link">Contact</span>
</span>
</a>
</li>
</ul>
</div>
</body>
</center>
</body>
</html>
ks