Порядок блоков при изменении ширины — различия между версиями
24pm (обсуждение | вклад) (Новая страница: «== Правый блок помещается НАД левым == <div style="float:right; width: 29%; min-width: 300px; max-width: 500px; background-color:#d19a…») |
Coder (обсуждение | вклад) |
||
| Строка 1: | Строка 1: | ||
== Правый блок помещается НАД левым == | == Правый блок помещается НАД левым == | ||
| + | <style> | ||
| + | .right_block { | ||
| + | width:29%; | ||
| + | } | ||
| + | |||
| + | @media screen and (max-width: 1300px) { | ||
| + | .right_block { | ||
| + | width:100%; | ||
| + | } | ||
| + | |||
| + | } | ||
| + | </style> | ||
| + | |||
<div style="float:right; width: 29%; min-width: 300px; max-width: 500px; background-color:#d19a04; margin: 10px;">ПРАВЫЙ БЛОК: Перечень порталов, ссылки на популярные статьи | <div style="float:right; width: 29%; min-width: 300px; max-width: 500px; background-color:#d19a04; margin: 10px;">ПРАВЫЙ БЛОК: Перечень порталов, ссылки на популярные статьи | ||
</div> | </div> | ||
| Строка 22: | Строка 35: | ||
</div> | </div> | ||
| − | <div style="float:right | + | <div class = "right_block" 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> | ||
Версия 12:50, 19 июня 2017
Правый блок помещается НАД левым
<style>
.right_block {
width:29%;
}
@media screen and (max-width: 1300px) {
.right_block {
width:100%;
}
} </style>
ПРАВЫЙ БЛОК: Перечень порталов, ссылки на популярные статьи
| ЛЕВЫЙ БЛОК: избранные статьи, изображения. В таблице, где много данных. В ширину данные могут занимать всю ширину окна, поэтому ширину блока таблицы необходимо контролировать. |
Правый блок помещается ПОД левым
ВЕРХНИЙ БЛОК (шапка): название страницы, приветствие, статистика
ПРАВЫЙ БЛОК: Перечень порталов, ссылки на популярные статьи
|
НИЖНИЙ БЛОК (подвал): контакты, важные ссылки
