Zamień elementy za pomocą CSS?

Question

Mam dość prosty układ, tak:

<div class="card"> 
    <span class="attack">1</div> 
    <span class="defence">2</div> 
</div> 

Są one rozmieszczone na szczycie siebie z prostego display: block. Co chcę osiągnąć, to gdy karta znajduje się w określonych obszarach, "atak" pokazuje na dole, a "obrona" jest na górze. Wiem, że mogę zrobić to z jQuery, ale czy mogę osiągnąć ten sam efekt używając czystego CSS?

Answer 1

To sprawa reguł biznesowych, która nie jest domeną warstwy kosmetycznej.

W dokumencie HTML kolejność elementów od pierwszego do ostatniego ma znaczenie semantyczne - Twój przypadek nie jest inny, podejrzewam, że próbujesz wskazać różnicę w ważności z jednego elementu do drugiego (w dokument, a nie tylko przedstawienie wizualne) w zależności od kontekstu.

Waszym podejściem powinno być więc JQuery lub inna metoda zmiany znaczenia relacji tych dwóch elementów pod względem ich kolejności w dokumencie. CSS ma na celu zmianę tylko ich wyglądu kosmetycznego.

W takich sytuacjach pomocne może być myślenie "co zrobić, gdy ktoś nie widzi elementów i musi polegać na czytniku ekranu, aby odczytać je w kolejności, w jakiej pojawiają się w dokumencie? nie tylko treść tych dwóch elementów, ale ich związek) są nadal poprawne i zrozumiałe? "

Możesz nie chcieć, aby ta funkcja była dostępna dla osób niewidomych, ale często jest to dobry test sprawdzający, jak podejść do problemu takiego jak ten.

Answer 2

Pierwsza myśl polega na użyciu pozycjonowania absolutnego w .card.

.card  { width:100px; height:50px; position:relative; } 
    .attack { width:100px; height:25px; position:absolute; top:25px; } 
    .defense { width:100px; height:25px; position:absolute; top:0; } 

W tym przykładzie wartość .attack będzie (wizualnie) niższa .defense. Ale zauważ, że jeśli wyłączysz CSS, zobaczysz prawdziwą aranżację.

Answer 3

Nie, nie możesz. Nawet jeśli zdecydujesz się spróbować "zhackować" to w CSS, wynikowy CSS będzie ogromny, niechlujny i nie będzie łatwy do utrzymania. Odpowiedni kod jQuery byłby bardzo prosty w porównaniu, zrozumiały i łatwy w utrzymaniu.

Answer 4

Jeśli znasz wysokość elementu, można użyć position: relative (z dodatnimi i ujemnymi wartościami, odpowiednio) lub position: absolute. Ale to wszystko jest bardzo hacky i zawiera wiele efektów ubocznych - zamiast tego zrobiłbym to w JavaScript.

Answer 5

Można to zrobić za pomocą (jeśli tylko chce zrobić swap w div.card):

.card .attack { 
    position: relative; 
    top: 1em; 
} 
.card .defence { 
    position: relative; 
    top: -1em; 
} 

Ale jak wspominają inni to może mieć niezamierzone skutki uboczne. Na przykład. powyższa próbka poprawnie przeniesie pozycję wymiany tylko dla 1 bloku linii.

Answer 6

Jestem całkiem pewien, że to będzie działać:

.card { 
    width: 100px; 
    height: 150px; 
    float: left; 
} 

.attack, .defence { 
    width: 100px; 
    height: 75px; 
    clear: right; 
} 

/* Play with height and padding-top of .defence to 
get the text to the very bottom */ 
.attack-top .card .attack { 
    float: left; 
} 
.attack-top .card .defence { 
    float: right; 
    height: Wpx; 
    padding-top: Xpx; 
} 


/* Play with height and padding-top of .attack to 
get the text to the very bottom */ 
.defence-top .card .attack { 
    float: right; 
    height: Ypx; 
    padding-top: Zpx; 
} 
.defence-top .card .defence { 
    float: left; 
} 

Istnieje kilka brakujące szczegóły w opisie, więc postaram się wypełnić moich założeń, możesz dać mi znać, jeśli są jest poprawny lub nie.

• Powiedziałeś "kiedy karta znajduje się w określonych obszarach".Założę się, że te obszary mogą być reprezentowane przez różne klasy zawierające (.attack-top i .defence-top, ale zmień nazwę według własnego uznania).
• Zakładam, że .card ma szerokość 100 pikseli i wysokość 150 pikseli. Jeśli te wartości szerokości i wysokości są nieprawidłowe, wypełnij właściwe i dokonaj odpowiednich ponownych obliczeń. Jeśli .card nie ma ustalonej szerokości/wysokości, może nadal działać, ale jestem mniej pewny siebie i nie będziesz w stanie uzyskać dolnego tekstu, aby przejść do samego dołu karty (tuż poniżej górnego tekstu).