Порядок блоков при изменении ширины - История изменений

24pm в 02:54, 23 июня 2017

2017-06-23T02:54:40Z

24pm в 02:45, 20 июня 2017

2017-06-20T02:45:08Z

24pm в 02:39, 20 июня 2017

2017-06-20T02:39:05Z

Coder в 10:06, 19 июня 2017

2017-06-19T10:06:51Z

Coder в 09:59, 19 июня 2017

2017-06-19T09:59:17Z

Coder в 09:56, 19 июня 2017

2017-06-19T09:56:52Z

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

2017-06-19T09:51:08Z

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

Coder в 09:50, 19 июня 2017

2017-06-19T09:50:06Z

24pm: Новая страница: «== Правый блок помещается НАД левым ==

@@ Строка 1: / Строка 1: @@
-== Правый блок помещается НАД левым ==
+<div style=" width:100%; border: 3px solid blue; background-color: #afdafc; margin: 5px 0;">
+<div style="text-align: center;"> ВЕРХНИЙ БЛОК </div>
-<div class="right_block_float" style="float:right; min-width: 300px; background-color:#d19a04; margin: 10px;">ПРАВЫЙ БЛОК: Перечень порталов, ссылки на популярные статьи
+* Приветствие
 </div>
-{| class=frame cellspacing="5" cellpadding="5" style="min-width: 300px;"
+{| style=" width: 100%; border: 3px solid black; background-color: #d0d0d0;"
-|- valign=top
+|-
-| ЛЕВЫЙ БЛОК: избранные статьи, изображения. В таблице, где много данных. В ширину данные могут занимать всю ширину окна, поэтому ширину блока таблицы необходимо контролировать.
+|<div style="text-align: center;"> СРЕДНИЙ БЛОК </div>
 |-
+|
-<div class="left_block_float" style="float:left; 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 class="right_block_float" 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>
 |}
-<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;">
-[[Категория: Примеры оформления]]
+[[Категория: Оформление]]

@@ Строка 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>
-{| class = "left_block_float" class=wikitable cellspacing="5" cellpadding="5"
+{| class=frame cellspacing="5" cellpadding="5" style="min-width: 300px;"
 |- valign=top
 | ЛЕВЫЙ БЛОК: избранные статьи, изображения. В таблице, где много данных. В ширину данные могут занимать всю ширину окна, поэтому ширину блока таблицы необходимо контролировать.
@@ Строка 19: / Строка 19: @@
 {| class=wikitable cellspacing="5" cellpadding="5"
 |- valign=top
-| ЛЕВЫЙ БЛОК: избранные статьи, изображения. В таблице, где много данных. В ширину данные могут занимать всю ширину окна, поэтому ширину блока таблицы необходимо контролировать.
+| ЛЕВЫЙ БЛОК: избранные статьи, изображения. В колонке много данных, оформленных в разные блоки. В ширину данные могут занимать всю ширину окна, поэтому ширину блока таблицы необходимо контролировать.
 |}
 </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 style=" width:100%; background-color: green; margin: 0 auto;">НИЖНИЙ БЛОК (подвал): контакты, важные ссылки</div>

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

@@ Строка 16: / Строка 16: @@
 |-
+|
-<div style="float:left; width: 70%; min-width: 400px;">
+<div class="left_block_test" style="float:left; min-width: 400px;">
 {| class=wikitable cellspacing="5" cellpadding="5"
 |- valign=top

@@ Строка 23: / Строка 23: @@
 </div>
-<div class = "right_block" style="float:right; min-width: 300px; background-color:#d19a04; margin: 16px 0 0 7px;">ПРАВЫЙ БЛОК: Перечень порталов, ссылки на популярные статьи
+<div class = "right_block_test" style="float:right; min-width: 300px; background-color:#d19a04; margin: 16px 0 0 7px;">ПРАВЫЙ БЛОК: Перечень порталов, ссылки на популярные статьи
 </div>
 |}
 <div style=" width:100%; background-color: green; margin: 0 auto;">НИЖНИЙ БЛОК (подвал): контакты, важные ссылки</div>

← Предыдущая		Версия 09:56, 19 июня 2017
Строка 1:		Строка 1:
−	~~<style>~~
−	~~.right_block {~~
−	~~width:29%;~~
−	}
−
−	~~@media screen and (max-width: 1300px) {~~
−	~~.right_block {~~
−	~~width:100%;~~
−	}
−
−	}
−	~~</style>~~
−
−

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

@@ Строка 1: / Строка 1: @@
 <style>
    .right_block {
@@ Строка 12: / Строка 11: @@
+}
 </style>
 <div style="float:right; width: 29%; min-width: 300px; max-width: 500px; background-color:#d19a04; margin: 10px;">ПРАВЫЙ БЛОК: Перечень порталов, ссылки на популярные статьи
@@ Строка 20: / Строка 23: @@
 | ЛЕВЫЙ БЛОК: избранные статьи, изображения. В таблице, где много данных. В ширину данные могут занимать всю ширину окна, поэтому ширину блока таблицы необходимо контролировать.
 |}
 == Правый блок помещается ПОД левым ==