Zmień kolejność płynęły div z CSS

JSFIDDLEZmień kolejność płynęły div z CSS

Chcę zmienić kolejność płynęły div przy pewnej wielkości piksela.

W stanie domyślnym oba mają szerokość 50% i znajdują się obok siebie.

Poniżej rozmiaru ekranu 600 pikseli (lub w/e nie ma znaczenia) Chcę, aby drugi element div (czerwony) był wyświetlany powyżej pierwszego elementu div (żółty).

Jak to jest możliwe z rozwiązaniem CSS only?

HTML

<div class="yellow"></div> 
<div class="red"></div>

CSS

.yellow { 
    background: yellow; 
    width: 50%; 
    height: 300px; 
    float:left; 
} 

.red { 
    background: red; 
    width: 50%; 
    height: 300px; 
    float:left; 
} 

@media screen and (max-width:600px) { 
    .yellow { 
     background: yellow; 
     width: 100%; 
     height: 300px; 
     float:left; 
    } 

    .red { 
     background: red; 
     width: 100%; 
     height: 300px; 
     float:left; 
    } 
}

Rozwiązanie chcę jest:

RED div

YELLOW DIV

ale teraz to:

żółty div

RED DIV

Źródło

2014-09-07 vaskort

[This] (http://jsfiddle.net/uh7zLphk/1/) to nieco inne podejście, ale ma zmianę w HTML. – Harry

Fajna, ale dostaniesz tylko "czucie", które unoszą się w powietrzu: pozostawione tylko wtedy, gdy oba mają 50% szerokości. Zmieniam piksele każdego z nich na stałą wartość. – vaskort

To prawda. [To] (http://jsfiddle.net/uh7zLphk/11/) to kolejne możliwe podejście. – Harry

Wiem, że pytasz, jak to zrobić, używając pływaków, ale o ile wiem, używając czystego CSS, jest to niemożliwe (przynajmniej bez użycia nieprzyjemnego pozycjonowania, o którym mówisz, że nie chcesz robić).

O ile mi wiadomo, jedynym dobrym sposobem na osiągnięcie tego przy pomocy czystego HTML/CSS jest wykorzystanie nowego flexbox spec (dobrym punktem wyjścia będzie prawdopodobnie this css tricks article).

Podczas korzystania schematu flexbox można użyć właściwości order na pozycji dyktować jakiej kolejności pojawiają się pozycje w (duh)

można zobaczyć przykład w działaniu here kod HTML jest podobny do tego, co masz , z dodatkiem elementu osłony (również stałe zgłoszenia DOCTYPE):

<!DOCTYPE html> 
<div class="wrapper"> 
    <div class="yellow"> 
    </div> 
    <div class="red"> 
    </div> 
</div>

CSS jest trochę inna:

.wrapper { 
    display: flex; 
    flex-flow: row wrap; 
} 

.yellow { 
    background: yellow; 
    width: 20%; 
    height: 300px; 
} 

.red { 
    background: red; 
    width: 20%; 
    height: 300px; 
} 

@media screen and (max-width:600px) { 
    .yellow { 
     order: 2; 
     width: 100%; 
    } 

    .red { 
     order: 1; 
     width: 100%; 
    } 
}

Oczyściłem go trochę, w zapytaniu o media pojawił się zduplikowany kod, który tak naprawdę nie musiał tam być.

Jedynym minusem jest to, że obecnie działa tylko na około 80% przeglądarek jak pisanie:

http://caniuse.com/#search=flexbox

zależności od rynku docelowego, które mogłyby być OK, można użyć wdzięku degradacji tak że wydaje się być poprawny pod każdym względem, z wyjątkiem zamawiania urządzeń, które nie obsługują w pełni Flexbox.

Domyślam się, że celujesz tylko w urządzenia mobilne, zmieniając rzeczy, wsparcie jest dobre, więc może Ci się to udać.

Źródło

2014-09-07 13:38:05 Sean

spróbować zmienić swój

HTML do tego -

<div class="container"> 
    <div class="yellow"></div> 
    <div class="red"></div> 
</div>

i Twojego zapytania @media do CSS to -

@media screen and (max-width:600px) { 
.container{ 
    display:flex; 
    flex-direction: column-reverse; 
} 
.yellow { 
    background: yellow; 
    width: 100%; 
    height: 300px; 

} 

.red { 
    background: red; 
    width: 100%; 
    height: 300px; 


} }

Źródło

2014-09-07 13:37:20

Tak. To jest dokładna odpowiedź jako podejście tylko CSS. – Christina

Oto proste rozwiązanie wykorzystujące ujemne marginesy i zmienne.

Dla CSS użyć następujących:

@media screen and (max-width:600px) { 
    .yellow { 
     background: yellow; 
     width: 100%; 
     height: 300px; 
     float:left; 
     margin-top: 300px; 
    } 

    .red { 
     background: red; 
     width: 100%; 
     height: 300px; 
     float:left; 
     margin-left: -100%; 
    } 
}

Twój HTML pozostaje taka sama, jak pisał.

Dodaj górny margines do .yellow, używając margin-top: 300px (równej wysokości czerwonego div ).

Dla czerwonego div dodaj ujemny lewy margines w wysokości 100%.

Spowoduje to, że czerwony element div zostanie ustawiony nad żółtym dywizorem, ale ponieważ użytkownik ma żółty wierzchołek górny, żółty element wyskakuje pod czerwonym znacznikiem div.

Sztuczka jest podobna do tej stosowanej w układzie 3-kolumnowym Holy Grail.

Zobacz demo: http://jsfiddle.net/audetwebdesign/jux84wzk/

Źródło

2014-09-07 13:53:57

Jak dotąd, nie ma telefonów pierwsze odpowiedzi, która jest mniejsza linii CSS i inne korzyści. To dotyka html, więc nie jest to pytanie OP, tylko podejście CSS to odpowiedź Flexboksa od dwóch innych peepsów, na które głosowałem.

DEMO: http://jsfiddle.net/mhrf6d4n/

HTML, uporządkować źródłowego najmniejszego rzutni pierwsze:

<div class="red"></div> 
<div class="yellow"></div>

CSS (umieścić wspólne, globalne dla wszystkich rzutniach poza zapytaniami mediów połącz selektory współdzielone, a następnie po ustawieniu min-width i umieść tam swoje elementy pływające)

.yellow, .red { 
    background: yellow; 
    height: 300px; 
} 
.red { 
    background: red; 
} 

@media screen and (min-width:600px) { 
    .yellow, .red { 
     float:left; 
     width:50%; 
    } 
}

Źródło

2014-09-07 17:45:36 Christina

Problem z pierwszym CSS na urządzenia mobilne polega na tym, że będąc "ładniejszym" i "bardziej wydajnym", przeskakuje style IE8- (IE8 ignoruje css w zapytaniu o media) – Sean

response.js, używano go od 2011 roku. kiedy naprawdę nie chcesz ładować małych użytkowników rzutni z dużymi stylami widoku i dużymi obrazami tła. – Christina

Interesujące, o czym wcześniej nie słyszałem (chociaż wydaje się, że coś jest w porządku, więc ma sens). Wygląda na to, że najpierw koduję moją następną stronę mobilną :) dzięki! – Sean

Zmień kolejność płynęły div z CSS

Odpowiedz

Powiązane problemy