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

Материал из СисадминВики песочница
Перейти к: навигация, поиск
 
(не показано 6 промежуточных версий 2 участников)
Строка 1: Строка 1:
−
== Правый блок помещается НАД левым ==
 
−
<style>
 
−
  .right_block {
 
−
  width:29%;
 
−
  }
 
  
−
@media screen and (max-width: 1300px) {
+
<div style=" width:100%; border: 3px solid blue; background-color: #afdafc; margin: 5px 0;">
−
  .right_block {
+
<div style="text-align: center;"> ВЕРХНИЙ БЛОК </div>
−
  width:100%;
+
* Приветствие
−
  }
+
* Логотип
−
 
+
* Основные ссылки
−
}
 
−
</style>
 
−
 
 
−
<div style="float:right; width: 29%; min-width: 300px; max-width: 500px; background-color:#d19a04; margin: 10px;">ПРАВЫЙ БЛОК: Перечень порталов, ссылки на популярные статьи
 
 
</div>
 
</div>
  
−
{| class=wikitable cellspacing="5" cellpadding="5"
+
{| style=" width: 100%; border: 3px solid black; background-color: #d0d0d0;"
−
|- valign=top
+
|-
−
| ЛЕВЫЙ БЛОК: избранные статьи, изображения. В таблице, где много данных. В ширину данные могут занимать всю ширину окна, поэтому ширину блока таблицы необходимо контролировать.
+
|<div style="text-align: center;"> СРЕДНИЙ БЛОК </div>
−
|}
 
−
 
 
−
 
 
−
== Правый блок помещается ПОД левым ==
 
−
<div style=" width:100%; background-color: blue; margin: 0 auto;">ВЕРХНИЙ БЛОК (шапка): название страницы, приветствие, статистика</div>
 
−
 
 
−
{|
 
 
|-
 
|-
 
|
 
|
−
<div style="float:left; width: 70%; min-width: 400px;">
+
<div class="left_block_float" style="min-width: 300px; border: 1px solid green; background-color: #50c878;">
−
{| class=wikitable cellspacing="5" cellpadding="5"
+
<div style="text-align: center;"> ЛЕВАЯ КОЛОНКА </div>
−
|- valign=top
+
* Избранная статья, изображение
−
| ЛЕВЫЙ БЛОК: избранные статьи, изображения. В таблице, где много данных. В ширину данные могут занимать всю ширину окна, поэтому ширину блока таблицы необходимо контролировать.
+
* Левый блок 1
−
|}
+
* Левый блок 2
 +
* ...
 
</div>
 
</div>
  
−
<div class = "right_block" style="float:right; min-width: 300px; background-color:#d19a04; margin: 16px 0 0 7px;">ПРАВЫЙ БЛОК: Перечень порталов, ссылки на популярные статьи
+
<div class="right_block_float" style="min-width: 200px; border: 1px solid red; background-color:#ffa8af;">
 +
<div style="text-align: center;"> ПРАВАЯ КОЛОНКА </div>
 +
* Основные ссылки
 +
* Правый блок 1
 +
* Правый блок 2
 +
* ...
 
</div>
 
</div>
 
|}
 
|}
  
−
<div style=" width:100%; background-color: green; margin: 0 auto;">НИЖНИЙ БЛОК (подвал): контакты, важные ссылки</div>
+
<div style="width:100%; border: 3px solid blue; background-color: #afdafc; margin: 5px 0;">
 +
<div style="text-align: center;"> НИЖНИЙ БЛОК </div>
 +
* Дополнительные ссылки
 +
</div>
 +
 
 +
[[Категория: Оформление]]

Текущая версия на 05:54, 23 июня 2017

ВЕРХНИЙ БЛОК
  • Приветствие
  • Логотип
  • Основные ссылки
СРЕДНИЙ БЛОК
ЛЕВАЯ КОЛОНКА
  • Избранная статья, изображение
  • Левый блок 1
  • Левый блок 2
  • ...
ПРАВАЯ КОЛОНКА
  • Основные ссылки
  • Правый блок 1
  • Правый блок 2
  • ...
НИЖНИЙ БЛОК
  • Дополнительные ссылки
Источник — «http://playground.sysadminwiki.ru/w/index.php?title=Порядок_блоков_при_изменении_ширины&oldid=390»