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

Obrazek ucieka przy flex-wrap

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
+1 głos
357 wizyt
pytanie zadane 25 lipca 2021 w JavaScript przez Doge Gaduła (3,420 p.)

Witam, mam następujący kod:

.modal-container .content
{
	margin: 0px;
	height: 100%;
	background-color: gray;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex-wrap: wrap;
	flex-direction: column;
}
.modal-container .content img
{
	width: 20px;
	height: 20px;
}
<div class="divs">You have 20% of getting it back or you will lose &nbsp<img src="img/${active_relicts_img_arr[index]}" />x1</div><div class="divs"><button class="yes">Yes</button><button class="cancel">Cancel</button></div>

(Przepraszam, że takie ułożenie HTML, ale wyjęte z JS)

i w momencie, kiedy tekst przekroczy szerokość i musi się zawinąć, obrazek ucieka daleko od tekstu. Natomiast kiedy tekst nie musi się zawijać, normalnie obrazek jest obok tekstu. O co chodzi i w jaki sposób można to naprawić?

Tak to wygląda:

komentarz 25 lipca 2021 przez Doge Gaduła (3,420 p.)
całość kodu:

https://codepen.io/DogeDoge/pen/gOWomKM

buttony znajdują się na prawym żółtym kafelku na dole

3 odpowiedzi

+1 głos
odpowiedź 26 lipca 2021 przez VBService Ekspert (256,320 p.)
wybrane 26 lipca 2021 przez Doge
 
Najlepsza

Zamknij tylko w <span> text i <img>  wink

 bez tej spacji &nbsp; , odstęp regulujesz między tekstem "lose" i "x1" a obrazkiem

za pomocą margin (np. tak jak na obrazku).  wink

+1 głos
odpowiedź 25 lipca 2021 przez VBService Ekspert (256,320 p.)

Usuń z .modal-container .content .divs   flex-wrap: wrap;

ramka czerwona dodana w celach demonstracyjnych.

komentarz 26 lipca 2021 przez Doge Gaduła (3,420 p.)

A czy jest sposób, aby używając flexboxa otrzymać obrazek w tekście?:

 

0 głosów
odpowiedź 25 lipca 2021 przez Zaqu93 Gaduła (4,850 p.)

Tekst ma na sobie wartość 

display: inline;

więc zajmuje tylko taką długość jaką musi, przy pierwszym przykładzie tekst jest na tyle długi, że zajmuje całą długość containera.

Obraz również ma wartość:

display: inline;

więc ustawia się w tej samej linii co tekst. możesz to zmienić np po przez danie tekstu w span i zmienienie tego spana:

span {
    display: inline-block;
    width: 100%;
}

dzięki czemu tekst zawsze będzie zajmować 100% długości rodzica Przykład:

https://codepen.io/Zaqu93/pen/mdmpmbO

komentarz 25 lipca 2021 przez Doge Gaduła (3,420 p.)
Ale właśnie chodzi mi o odwrotny efekt, aby obrazek był obok tekstu. Przepraszam, trochę źle sformułowałem pytanie.
1
komentarz 25 lipca 2021 przez Zaqu93 Gaduła (4,850 p.)

W takim wypadku nadaj

span, img {
    display: inline-block;
    flex: 1;
}

Przykład:

https://codepen.io/Zaqu93/pen/abWEWOe

 

komentarz 25 lipca 2021 przez Doge Gaduła (3,420 p.)

A czy dałoby się zrobić tak, aby ten obrazek był bardziej w tekście? Coś w tym stylu:

1
komentarz 25 lipca 2021 przez Zaqu93 Gaduła (4,850 p.)
Tak zachowuje się natywnie text i img więc wystarczy, że nie będziesz używał flexa.

daj text i img do diva a buttony będą osobno w ten sposób flex nie dosięgnie textu i img tylko buttony.

Przykład:

https://codepen.io/Zaqu93/pen/PomEmGJ

Podobne pytania

0 głosów
2 odpowiedzi 311 wizyt
pytanie zadane 13 kwietnia 2019 w HTML i CSS przez Gekon Początkujący (380 p.)
+1 głos
3 odpowiedzi 205 wizyt
pytanie zadane 10 kwietnia 2021 w HTML i CSS przez ShadoWs Bywalec (2,800 p.)
0 głosów
1 odpowiedź 120 wizyt

93,176 zapytań

142,187 odpowiedzi

321,982 komentarzy

62,508 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 1637p. - dia-Chann
  2. 1614p. - Łukasz Piwowar
  3. 1599p. - CC PL
  4. 1597p. - Łukasz Eckert
  5. 1572p. - Tomasz Bielak
  6. 1545p. - Michal Drewniak
  7. 1537p. - Łukasz Siedlecki
  8. 1531p. - rucin93
  9. 1509p. - rafalszastok
  10. 1506p. - Marcin Putra
  11. 1380p. - Adrian Wieprzkowicz
  12. 1356p. - ssynowiec
  13. 1341p. - Mikbac
  14. 1169p. - Grzegorz Aleksander Klementowski
  15. 1155p. - Piotr Aleksandrowicz
Szczegóły i pełne wyniki

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

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...