• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Jak przesunąć div'a na drugi koniec rodzica

VPS Starter Arubacloud
+1 głos
392 wizyt
pytanie zadane 7 czerwca 2021 w HTML i CSS przez Nearr Obywatel (1,890 p.)

Witam, robię design paska xp i chcę zrobić postęp, czyli ile ma obecnie xp oraz ile mu brakuje do następnego poziomu. Jak przesunąć div'a na drugi koniec rodzica bez użycia transform: translate albo marginów

          <div class="xp-progress">
            <div class="current-xp">0</div>
            <div class="xp-u-need-to-earn">1000</div>
          </div>
.xp-progress {
  width: 100%;
  height: 30;
  background: #0064b1;
  border-radius: 3px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 2px;
}

.current-xp {
  font-size: 14px;
  width: auto;
  height: auto;
  margin-left: 5px;
}

.xp-u-need-to-earn {
  font-size: 14px;
  width: auto;
  height: auto;
  margin-right: 5px;
}

Na zdjęciu użyłem transform: translate, żeby zobrazować jak ma to wyglądać

komentarz 7 czerwca 2021 przez ScriptyChris Mędrzec (190,190 p.)

W HTML-u jest element <progress>, który z grubsza oferuje to, co w propozycji od W3S trzeba implementować w JS-ie.

2 odpowiedzi

+2 głosów
odpowiedź 7 czerwca 2021 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 7 czerwca 2021 przez Nearr
 
Najlepsza

Skoro korzystasz z Flexboxa, to możesz użyć property order, aby zmienić kolejność danego elementu (dziecka) wizualnie przesuwając go. Ewentualnie nadaj parentowi pozycjonowanie relatywne, a dziecku absolutne i right na 0.

komentarz 7 czerwca 2021 przez Nearr Obywatel (1,890 p.)
Dziękuję :)
0 głosów
odpowiedź 7 czerwca 2021 przez VBService Ekspert (251,170 p.)

Możesz też ustawić w .xp-progress  wink jeżeli używasz display: flex;

justify-content: space-between;

 

Podobne pytania

0 głosów
2 odpowiedzi 258 wizyt
pytanie zadane 13 września 2016 w HTML i CSS przez Maciek Gamrot Bywalec (2,830 p.)
0 głosów
2 odpowiedzi 910 wizyt
pytanie zadane 10 kwietnia 2016 w HTML i CSS przez niezalogowany
0 głosów
1 odpowiedź 498 wizyt

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...