Порядок блоков при изменении ширины — различия между версиями

Материал из СисадминВики песочница
Перейти к: навигация, поиск
Строка 2: Строка 2:
 
== Правый блок помещается НАД левым ==
 
== Правый блок помещается НАД левым ==
  
<div class = "right_block_float" style="float:right; width: 29%; min-width: 300px; max-width: 500px; background-color:#d19a04; margin: 10px;">ПРАВЫЙ БЛОК: Перечень порталов, ссылки на популярные статьи
+
<div class="right_block_float" style="float:right; min-width: 300px; background-color:#d19a04; margin: 10px;">ПРАВЫЙ БЛОК: Перечень порталов, ссылки на популярные статьи
 
</div>
 
</div>
  
{| class = "left_block_float" class=wikitable cellspacing="5" cellpadding="5"
+
{| class=frame cellspacing="5" cellpadding="5" style="min-width: 300px;"
 
|- valign=top
 
|- valign=top
 
| ЛЕВЫЙ БЛОК: избранные статьи, изображения. В таблице, где много данных. В ширину данные могут занимать всю ширину окна, поэтому ширину блока таблицы необходимо контролировать.
 
| ЛЕВЫЙ БЛОК: избранные статьи, изображения. В таблице, где много данных. В ширину данные могут занимать всю ширину окна, поэтому ширину блока таблицы необходимо контролировать.
Строка 19: Строка 19:
 
{| class=wikitable cellspacing="5" cellpadding="5"
 
{| class=wikitable cellspacing="5" cellpadding="5"
 
|- valign=top
 
|- valign=top
| ЛЕВЫЙ БЛОК: избранные статьи, изображения. В таблице, где много данных. В ширину данные могут занимать всю ширину окна, поэтому ширину блока таблицы необходимо контролировать.
+
| ЛЕВЫЙ БЛОК: избранные статьи, изображения. В колонке много данных, оформленных в разные блоки. В ширину данные могут занимать всю ширину окна, поэтому ширину блока таблицы необходимо контролировать.
 
|}
 
|}
 
</div>
 
</div>
  
<div class = "right_block_float" style="float:right; min-width: 300px; background-color:#d19a04; margin: 16px 0 0 7px;">ПРАВЫЙ БЛОК: Перечень порталов, ссылки на популярные статьи
+
<div class="right_block_float" style="float:right; min-width: 300px; background-color:#d19a04; margin: 16px 0 0 7px;">ПРАВЫЙ БЛОК: Перечень порталов, ссылки на популярные статьи
 
</div>
 
</div>
 
|}
 
|}
  
 
<div style=" width:100%; background-color: green; margin: 0 auto;">НИЖНИЙ БЛОК (подвал): контакты, важные ссылки</div>
 
<div style=" width:100%; background-color: green; margin: 0 auto;">НИЖНИЙ БЛОК (подвал): контакты, важные ссылки</div>
 +
 +
[[Категория: Примеры оформления]]

Версия 05:45, 20 июня 2017

Правый блок помещается НАД левым

ПРАВЫЙ БЛОК: Перечень порталов, ссылки на популярные статьи
ЛЕВЫЙ БЛОК: избранные статьи, изображения. В таблице, где много данных. В ширину данные могут занимать всю ширину окна, поэтому ширину блока таблицы необходимо контролировать.

Правый блок помещается ПОД левым

ВЕРХНИЙ БЛОК (шапка): название страницы, приветствие, статистика
ЛЕВЫЙ БЛОК: избранные статьи, изображения. В колонке много данных, оформленных в разные блоки. В ширину данные могут занимать всю ширину окна, поэтому ширину блока таблицы необходимо контролировать.
ПРАВЫЙ БЛОК: Перечень порталов, ссылки на популярные статьи
НИЖНИЙ БЛОК (подвал): контакты, важные ссылки