Изменить порядок деления на адаптивном дизайне
Я создаю адаптивный дизайн сайта.
В основном, когда порт просмотра ниже, чем X I, я хочу показать меню в нижней части страницы.
ПРИМЕР ССЫЛКА МЕРТВЫЙ - САЙТ НЕ ДОЛГО МЕНЯ
Если вы измените размер окна браузера, вы заметите 3 различных дизайна (на основе дизайна конечной цели, а не типов устройств)
V1: больше, чем 999px, вы увидите красный прямоугольник слева вверху, синий прямоугольник рядом с красным прямоугольником.
V2: между 600px и 999px, вы заметите, что красная коробка становится меньше, синяя коробка теперь находится под красной рамкой
v3: Менее 600px. Вы снова заметите, что красная коробка становится меньше, а синяя коробка теперь желтая.
В основном, в V3 я хочу сделать теперь желтую коробку, сидеть под зеленой рамкой, над серой рамкой
так что порядок идет красный ящик зеленый ящик желтый ящик серый ящик
Кроме скверного скрытия старого div, покажите новый div hack (техника) или версию JS (уходит от CSS Responsive) Есть ли способ переместить это.
CSS находится внутри файла, поэтому просмотр исходного кода показывает все.
ура
9 ответов
Честно говоря, я не могу придумать, как сделать это в одиночку, но это легко сделать в jQuery, не нарушая адаптивный дизайн. Ваш CSS не нужно менять, кроме как удалить маржинальную вершину из div #top-links.
<script type="text/javascript">
$(document).load($(window).bind("resize", listenWidth));
function listenWidth( e ) {
if($(window).width()<600)
{
$("#topLinks").remove().insertAfter($("#content"));
} else {
$("#topLinks").remove().insertBefore($("#content"));
}
}
</script>
Я только что реализовал решение от
http://www.jtudsbury.com/thoughts/rearrange-div-order.php
который использует display: table-header-group; а также display: table-footer-group;
Вот мой пример для двух горизонтальных блоков шириной 50%, которые переключаются вправо над левым блоком при уменьшении ширины окна:
.box-container {
display: table;
}
.box-50 {
width: 50%;
display: table-cell;
padding: 0 20px;
}
@media only screen and (max-width : 700px) {
.box-container {
display: block;
}
.box-50 {
display: block;
width: 100%;
}
/* http://www.jtudsbury.com/thoughts/rearrange-div-order.php */
.box-50.left {
display: table-footer-group;
}
.box-50.right {
display: table-header-group;
}
}
Попробуйте это может быть полезным
@media (min-width:1px) and (max-width:599px) {
#pageFrame {
width:100%;
}
#logo {
margin:0 auto;
width:50px;
height:50px;
}
#topLinks {
position:absolute;
top:250px;
float:right;
width:100%;
background-color:yellow;
}
#content {
position:absolute;
top:100px;
clear:none;
float:left;
width:100%;
}
#footer {
position:absolute;
top:350px;
clear:both;
width:100%;
}
Flex-Box - это ответ, который вы ищете. Проверьте (эта ссылка сейчас не работает - http://www.jordanm.co.uk/lab/contentchoreography) для полного объяснения всех функций Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Да, очень просто изменить порядок div в контейнере. Пожалуйста, посмотрите мой рабочий HTML-код CSS.
<html>
<head>
<style type="text/css">
#nav_bar{
width:100%;
height:50px;
background:red;
}
#container{
width:100%;
height:500px;
}
#left_panel {
position:relative;
float:left;
width:250px;
border:0px solid black;
background:#ccc;
height:100%;
}
#right_panel{
width:100%;
background:#666;
height:100%;
}
#inner_container{
height:100%;
}
.center {
margin-left: auto;
margin-right: auto;
width: 40%;
padding-top:50px;
}
.data_container{
border:1px solid black;
float:left;
position:relative;
padding:10px;
}
#footer{
width:100%;
height:50px;
background:blue;
}
@media all and (max-width: 700px) {
#container {
width: 100%;
height: 500px;
display: flex;
flex-flow: column-reverse ;
}
#left_panel {
width:100%;
height:200px;
}
#right_panel{
width:100%;
height:300px;
}
}
</style>
</head>
<body>
<div id="nav_bar">Nav</div>
<div id="container">
<div id="left_panel">
<div class="center">
Left Panel content
</div>
</div>
<div id="right_panel">
<div id="inner_container" class="center">
<div class="data_container">
Action Item 1
</div>
<div class="data_container">
Action Item 2
</div>
<div class="data_container">
Action Item 3
</div>
</div>
</div>
</div>
<div id="footer">Footer</div>
</body>
</html>
Попробуйте создать два элемента div, один в нижнем колонтитуле и один в верхнем колонтитуле, "display:none", нижний, когда экран меньше X показывает его.
Используя EventListener и matchMedia:
//on load
responsive_change_box_order();
//on resize
window.addEventListener('resize', responsive_change_box_order );
function responsive_change_box_order() {
if (window.matchMedia("(max-width: 1118px)").matches) {
jQuery("#block-menu-block-1").remove().insertBefore(jQuery("#content"));
}
else{
jQuery("#block-menu-block-1").remove().prependTo(jQuery(".region-sidebar-second .region-inner"));
}
}
Вы должны взглянуть на direction собственность css. https://developer.mozilla.org/en-US/docs/Web/CSS/direction
Что вы можете сделать, это:
direction: rtl;на вашем родительском контейнере:.container { direction: rtl; }- сбросить его до нормального на прямых детях:
.container > * { direction: ltr; } - Измените порядок ваших div в вашем HTML, чтобы в настольной версии все отображалось в правильном порядке
И это работает на всех браузерах, потому что это свойство поддерживается везде (из IE 5.5...).
Если вы используете Bootstrap 4, я создал простой плагин для проверки текущей точки останова медиа-запроса и затем установил его в качестве переменной.
Вы можете сделать что-то вроде
if ( xs == true ) {
$("#topLinks").remove().insertAfter($("#content"));
}
Вы можете получить его здесь: https://jacoblett.github.io/IfBreakpoint/