Веб-строительство и интернет-проекты
Реализация в верстке слоями. Div-ы в одну линию.
Создана: 03 Марта 2010 Срд 16:33:01.
Раздел: "Веб-строительство и интернет-проекты"
Сообщений в теме: 4, просмотров: 2027
-
03 Марта 2010 Срд 16:33:01Кто-нибудь может подсказать, как можно реализовать вот такую верстку с помощью div-ов (и можно ли вообще)?
При изменении ширины слоя-контейнера группа внутренних слоев (ширина у них одинаковая) должна распределяться по ширине контейнера, сохраняя одинаковые отступы от краев контейнера.
P.S
Как сделать такое с помощью таблицы - вопросов не вызывает. -
-
04 Марта 2010 Чтв 13:33:20Olldman писал
: Расстояние между внутренними блоками должно быть одинаковым?
Ну в общем желательно. Одним словом, чтобы эта конструкция вела себя, как будто бы это сделано в таблице. Вот пока у меня не получается реализовать такое. Думаю, что как-то сделать все-таки это можно, просто "глубины глубин" познаний в CSS не хватает. -
04 Марта 2010 Чтв 19:51:06Собственно я тоже не супер-пупер идеальный специалист, но могу сказать, что именно как в таблице сделать довольно сложно. Я поковырял ваш вариант, добился того, что вы упоминаете конкретно - расстояния до краев общего контейнера одинаковые. Но вот между собой сделать одинаковые расстояния не получается.
Пример:
Код: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title></title>
<style type="text/css">
*{margin:0px;padding:0px;}
html{height:100\%;}
body{width:100\%;}
div.groups{width:94\%;height:auto;position:relative;overflow:hidden;border:1px solid black;padding:2\%;}
#groups div{width:200px;min-height:100px;float:left;margin:0px 1\%;border:1px solid green;}
.groups\_left{width:46\%;float:left;position:relative;}
.groups\_right{width:46\%;float:right;position:relative;}
.groups\_left div, .groups\_right div{width:200px;height:100px;border:1px solid green;}
.left{float:left;}
.right{float:right;}
</style>
</head>
<body>
<div class="groups">
<div class="groups\_left">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="groups\_right">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
</body>
</html>
