"Zawijanie" diva CSS

"Zawijanie" diva CSS
Gouda105
  • Rejestracja:prawie 8 lat
  • Ostatnio:około miesiąc
  • Postów:487
0

Witam,
Mam 2 divy obok siebie jeden (ten po prawej) jest przyklejony do prawej krawędzi lewego. I do lewego dodaję co jakiś czas nowego diva używając append() jquery. Potrzebuję, aby lewy div "zawijał się" bez pustej przestrzeni po prawej. Chciałbym uzyskać efekt jak na zdjęciu. Jak mogę do tego dojść?
ilustracja.png

Patryk27
To wygląda niecodziennie - co ma się znajdować w tym większym divie?
Gouda105
mniesze, kwardatowe divy.
Patryk27
Co ma się tam znajdować w sensie treści? Chodzi mi o to, że na ogół niczego nie prezentuje się w taki sposób, więc na Twoim miejscu uderzyłbym do ux designera_ki i zapytał czy na pewno tego chcą.
cerrato
Moderator Kariera
  • Rejestracja:około 7 lat
  • Ostatnio:około 12 godzin
  • Lokalizacja:Poznań
  • Postów:8802
3

Z tego co kojarzę, to nie ma opcji, żeby DIV (czy jakikolwiek inny element blokowy) miał kształt niebędący prostokątem.
Możesz kombinować i np. połączyć 2 elementy - ale wtedy będzie problem z treścią/zawartością takich połączonych elementów.
Rzuć okiem na https://stackoverflow.com/questions/6444129/is-it-possible-to-have-a-non-rectangular-div


GE
  • Rejestracja:ponad 6 lat
  • Ostatnio:6 miesięcy
  • Postów:28
0

Nie da się zrobić diva innego niż prostokątny.
A czy te divy muszą znajdować się w tym większym divie? Proponowałbym podzielenie tego na 3 divy. Jeden główny na samej górze oraz dwie sekcje obok siebie z której jedna sekcja będzie miała display flex oraz flex direction column i do niej beda wrzucane kolejne divy.divy.png

Freja Draco
Freja Draco
  • Rejestracja:około 7 lat
  • Ostatnio:ponad 3 lata
  • Postów:3394
2

Użyj SPAN-ów.
Jeśli koniecznie chcesz DIV-y możesz na nich wymusić display:inline.
Niestety ma to też dodatkowe konsekwencje, bo elementy inline nie posiadają np. marginesów.


obscurity
  • Rejestracja:około 6 lat
  • Ostatnio:około 13 godzin
1

a czemu ten ostatni kwadrat nie może być z tymi małymi w tym lewym? wtedy wystarczy dać display: flex; flex-wrap: wrap i wszystko się poukłada tak jak chcesz.


"A car won't take your job, another horse driving a car will." - Horse influencer, 1910

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.