Как разверстать такую штуку?

Статус
Закрыто для дальнейших ответов.

czp

czp
Регистрация
05.06.2011
Сообщения
635
как сделать что бы, если блок 2 маленький то блок 1 и блок 3 увеличелись к нему, а если он большой то блок 1,3 уменшелись до опред мин размера? без JS такое реально разверстать? что бы блоки 1,3 гуляли по высоте в зависимости от высоты блока 2, и если совсем блок 2 боШООООЙ,больше высоты моника, то они просто принимают минимальную высоту
картинки прилагаю
 

Вложения

  • 19,9 КБ Просмотры: 9
  • 21,3 КБ Просмотры: 10

lekzd

parse error: parse error, unexpected T_STRING...
Регистрация
17.02.2011
Сообщения
1 125
Таблицы..или вы как многие, брезгуете?=))
 

czp

czp
Регистрация
05.06.2011
Сообщения
635
не брезгую ну как то не особо хочется ими) видь сейчас можно дивам задать стиль таблиц так? и ими моэно такое верстануть)
 

lekzd

parse error: parse error, unexpected T_STRING...
Регистрация
17.02.2011
Сообщения
1 125
ну задайте, зачем у меня заранее спрашивать? но результат я не знаю, горизонтальное выравнивание вроде как браузеры ставят а вот вертикальное..
 

tigra60

Спасатель
Регистрация
10.12.2009
Сообщения
1 990
Да. можно.

Вот пример:
Код:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>3 блока</title>
<style>
.table {
width:500px;
height:600px;
margin:0 auto;
border:solid 1px red;
display:table;
}
.tr {
display:table-row;
}
.b1 {
background:#FF99CC;
display:table-cell;
}
.b2 {
background:#33CC99;
height:10px;
padding:0 10px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
display:table-cell;
}
.b3 {
background:#66FF66;
display:table-cell;
}
</style>
</head>

<body>
<div class="table">
<div class="tr">
<div class="b1">
</div>
</div>
<div class="tr">
<div class="b2">
<p>Служба <a href="http://referats.yandex.ru/">Яндекс.Рефераты</a> предназначена для студентов и школьников, дизайнеров и журналистов, создателей научных заявок и отчетов — для всех, кто относится к тексту, как к количеству знаков.</p>
<p>Нажав на кнопку «Написать реферат» вы лично создаете уникальный текст, причем именно от вашего нажатия на кнопку зависит, какой именно текст получится — таким образом, авторские права на реферат принадлежат только вам.</p>
<p>Теперь никто не сможет обвинить вас в плагиате, ибо каждый текст Яндекс.Рефератов неповторим.</p>
<p>Текстами рефератов можно пользоваться совершенно бесплатно, однако при транслировании и предоставлении текстов в массовое пользование ссылка на <a href="http://referats.yandex.ru/">Яндекс.Рефераты</a> обязательна.</p>
</div>
</div>
<div class="tr">
<div class="b3">
</div>
</div>
</div>
</body>
</html>
Поиграйтесь с размером font-size для блока b2
 

Вложения

  • 9,4 КБ Просмотры: 22
  • 37,8 КБ Просмотры: 25
  • 53,5 КБ Просмотры: 15

BaNru

Пацифизжу
Команда форума
Регистрация
13.11.2010
Сообщения
4 144
Мельком глянул код от Тигры, он так же все сводит к таблицам. Может я ошибаюсь...
Если ослы старых моделей не принципиальны, то стоит глянуть в сторону CSS3 CALC
 
Статус
Закрыто для дальнейших ответов.
Верх Низ