Игра с плавающей точкой в ​​CSS3 Media Queries - PullRequest
Новая
       23

Игра с плавающей точкой в ​​CSS3 Media Queries

2 голосов
/ 08 февраля 2012

Я работаю над своим адаптивным сайтом, где структура HTML выглядит следующим образом: 

<div id="container">
    <div id="first">FIRST</div>
    <div id="second">SECOND</div>
    <div id="third">THIRD</div> 
</div>

Div #First, #Second & #Third has float: left

Итак, когда ширина браузера превышает 1280 пикселей, они появляются в следующем порядке:

== 1 == 2 == 3 ==

& Когда ширина браузера меньше 767 пикселей, онив соответствии с моими медиа-запросами css3 уменьшается в ширину и появляется один под другим:

== 1 ==

== 2 ==

== 3 ==

То, чего я хочу достичь, это когда ширина браузера меньше 767 пикселей, их порядок должен быть:

== 1 ==

== 3 ==

== 2 ==

Вы можете увидеть структуру DOM Jsbin Здесь

Как мне добиться этого с помощью чистого CSS3?

Ответы [ 3 ]

2 голосов
/ 08 февраля 2012

попробуйте переместить третье и второе справа и переупорядочить их так, как вы хотите здесь: jsbin 

#first, #third {width:250px;height: 200px;background: #aaa;float: left;text-align: center}
#second {width: 460px;height: 200px;background: #ddd;float: left;text-align: center}
#third, #second { float:right;}

Html: 

<div id="first">FIRST</div>
<div id="third">THIRD</div>
<div id="second">SECOND</div>
1 голос
/ 08 февраля 2012

Вы не можете сделать это с помощью CSS ... пока.

Если любой браузер поддерживает модуль расширенного макета, вы можете сделать это: 

/* Default to small size */
#container {display: "a" "b" "c"}
#first {position: "a"}
#second {position: "c"}
#third {position: "b"}

/* Move #third to bottom on slightly larger resolutions */
@media only screen and (min-width: 768px) {
    #first {position: "a"}
    #second {position: "b"}
    #third {position: "c"}
}

/* Display side by side on even larger resolutions */
@media only screen and (min-width: 992px) {
    #container {display: "abc"}
    #first {position: "a"}
    #second {position: "b"}
    #third {position: "c"}
}
0 голосов
/ 08 февраля 2012

Хорошо, это решение зависит от знания высоты каждого деления.Если вы не знаете высоту заранее, вам нужно будет использовать javascript, чтобы получить высоту и применить ваши изменения.

Вот код: 

    @media only screen and (min-width: 480px) and (max-width: 767px)
{
    #container {width: 300px;}
    #first{width:300px;height: 200px;}
    #second {
        width: 300px;
        height: 200px;
        top: 200px;
        position: relative;
    }
     #third {
     background: blue;
     position: relative; 
     width: 300px; 
     height: 200px;
     top: -200px;
     }
}

Вы устанавливаете их позиции наотносительный и укажите верхнее свойство.Чтобы третий элемент переключался со вторым, вы должны присвоить ему отрицательное верхнее значение высоты второго элемента.Затем вы просто даете второму элементу верхнее значение, равное высоте третьего элемента.Это заставит их поменяться местами в макете.

...