| |
 21.2 Кб |
|
| | Идея: div сверху, div снизу, div между ними.
В том, который посередине - контент. В роли контента - img и пара слов текста. Таких "блоков" - 6 колонок по 6 рядов, допустим. body по ширине 780px, каждая колонка, следовательно - 130px.
Соответственно должно отобразиться:
ВЕРХ
БЛОКИ КОНТЕНТА (в каждом блоке - картинка и под ней пара слов текста)
НИЗ
Код:
<body style="width:780px;">
<style>
#tmbcontent {
background: white;
}
.tmbcontainer {
text-align: center;
width: 130px;
float: left;
font-size: 14px;
}
.tmbimg {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<div style="background:red;">Upper DIV</div>
<div id="tmbcontent">
<span class="tmbcontainer"><img src="images/goods/waterproof.jpg" class="tmbimg">text text</span>
<span class="tmbcontainer"><img src="images/goods/waterproof.jpg" class="tmbimg">text text</span>
<span class="tmbcontainer"><img src="images/goods/waterproof.jpg" class="tmbimg">text text</span>
<span class="tmbcontainer"><img src="images/goods/waterproof.jpg" class="tmbimg">text text</span>
<span class="tmbcontainer"><img src="images/goods/waterproof.jpg" class="tmbimg">text text</span>
<span class="tmbcontainer"><img src="images/goods/waterproof.jpg" class="tmbimg">text text</span>
</div>
<div style="background:blue;">Lower div</div>
</body>
ПРОБЛЕМА:
Вместо вышеописаного желаемого поведения получается, что нижний div визуально начинается от верхнего и заканчивается там, где должен, сами контейнеры с картинками вродебы на своих местах, но при этом средний див #tmbcontent - его какбы нет вообще, он не даёт свой background:white на контейнеры с контентом. Вместо этого - эффект, описаный вначале абзаца.
У меня сейчас мозг взорвется. Помогите, пожалуйста. Прилагаю скриншот безобразия.
P.S. Если добавить ещё один контейнер с контентом, который появлятся на следующем ряду, как и предполагалось, то он "выскакивается" за нижний слой, т.е. нижний слой не двигается ниже, как должно быть. Т.е. очевидно, что действительно, прилип к верхнему :( | |
| |
|
