Адаптивный шаблон
-
-
Администратор
- Сообщений: 517
Надо подумать. Кажись в бутстрапе был такой хак, Дима вроде говорил. Я эти вопросы решаю программно, тупо подключаю другой (двухколоночный) шаблон, что не есть гуд конечно. Подумаем, надо конечно решать этот вопрос более профессионально. -
-
VIP Пользователь
- Сообщений: 88
спасибо за участие -
-
Администратор
- Сообщений: 517
Такс. Есть решение с помощью flexbox. Готовим чистый документ html и начинаем заполнять его:
<?php
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Flexbox examples</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="main-container"> <main class="flex-item"> <div> <p>Main</p> <p>Lorem ipsum dolor sit amet consectetuer semper penatibus pretium facilisi parturient. Tempus ipsum felis risus wisi habitant semper Donec dictumst tristique et. Mi quis ut semper justo volutpat Morbi nulla Fusce dictumst justo. In laoreet magnis lacus id.</p> </div> </main> <aside class="flex-item bl"> <div> <p>Left</p> <p>Lorem ipsum dolor sit amet consectetuer semper penatibus pretium facilisi parturient.</p> </div> </aside> <aside class="flex-item bl"> <div> <p>Right</p> <p>Lorem ipsum dolor sit amet consectetuer semper penatibus pretium facilisi parturient.</p> </div> </aside> </div> </body> </html>
Стили:
<?php
*{ padding:0; margin:0; outline:none; } html{ min-height: 100%; display: -webkit-flex; display: flex; flex-direction: column; } .main-container { max-width:1280px; min-width:300px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; justify-content: space-between; align-items:stretch; align-content:stretch; flex-flow:row nowrap; } /* Decorations -------------------- */ body{ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-direction: column; flex: auto; background:#fefefe;padding:0;font:1em/1.3em "PT Sans",Arial,Tahoma,sans-serif; color:#272727; } img{margin:0;padding:0;vertical-align:middle;border:none;} .main-container { background: gold; border-radius: 2px; } main.flex-item{ flex:1 1 90%; } .flex-item div{ background: tomato; border-radius: 5px; padding: 10px; border: 1px solid #FFF; } .bl{ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-flow:row wrap; max-width:300px; } @media (max-width:600px){ .main-container { flex-flow:row wrap; } .bl{ max-width:100%;} }
При этом у нас элемент main, в котором, как обычно, располагается самая важная информация страницы находится первым по коду, что есть гуд для ПС. А вот элементы aside - это так называемые сайдбары. Схема такова, что они идут следом за главным элементом. Но вот вам фокус - стоит указать элементам приказ (order) и мы запросто выстраиваем старый, дедовский трехколоночный шаблон, где справа и слева будут сайдбары, а по центру основная инфа. Что для этого нужно - дописать стили:
<?php
main.flex-item{ order:1; }
и
<?php
.bl:first-child{ order:0; } .bl:last-child{ order:2; }
Поиграйтесь циферками - 0 - первый, 1 и последующие за ним по значимости. -
-
Администратор
- Сообщений: 517
И да, совсем забыл - у нас в шаблонах получится элементы aside не убираемые, т.е. они постоянно есть - вот они и остаются, а если в них не выводится инфа, то исчезают. -
-
VIP Пользователь
- Сообщений: 88
Прикольно, буду пробовать
а я пока вот что сделал, в основных стилях прописал ширину дроп. колонки 0%
а там где надо выводить 2 колонки вывел блок с с оформлением "без оформления" со скриптом:
<?html
<script><br /> $(document).ready ( function(){<br /> $(".col-main").css("width", "80%"); <br /> $(".col-left").css("width", "20%"); <br /> });<br /> </script>
Тему читают:
Пользователей 0, Гостей 1, Роботы 0
Пользователей 0, Гостей 1, Роботы 0
Календарь форума