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

question-closed Pływanie elementów blokowych - wytłumaczenie

VPS Starter Arubacloud
0 głosów
485 wizyt
pytanie zadane 18 sierpnia 2015 w HTML i CSS przez Patrycjerz Mędrzec (192,340 p.)
zamknięte 18 sierpnia 2015 przez Patrycjerz

Witam,

jak chyba każdy początkujący, mam problemy z pływającymi elementami. Nie chodzi o wykorzystanie tej właściwości, bo to umiem, ale o zrozumienie pewnych zależności.

Więc moje pytanie jest takie: dlaczego pływające elementy blokowe nie rozmieszczają się tak, jak wg mnie powinny, tzn. np. gdy ustawimy float: left dla obrazka, to tekst (elementy liniowe) znajduje sobie ładnie miejsce. Gdy użyjemy tej zależności dla divów (elementy blokowe), to nagle div po elemencie z float: left nie znajduje miejsca po prawej stronie, tylko jest wyświetlany na prawie tej samej pozycji (divy się pokrywają). Zadziała to jedynie, gdy wszystkie divy posiadają float: left oraz użyjemy jakiegoś elementu z clear: both. Ale dlaczego wszyskie elementy muszą mieć float: left? Ten ostatni div nie mógłby mieć float: none? Przecież względem czego ma się on ustawić po lewej stronie? Wiem, że to zagmatwane, ale przeczy mi się to z logiką.

Za pomoc w wytłumaczeniu tego będę bardzo wdzięczny.

komentarz zamknięcia: Problem rozwiązany

3 odpowiedzi

0 głosów
odpowiedź 18 sierpnia 2015 przez chris Gaduła (3,680 p.)
wybrane 18 sierpnia 2015 przez Patrycjerz
 
Najlepsza

Do klasa1 dopisz float: left;
 

.klasa1
{
	background-color: #cccccc;
	width: 200px;
	height: 200px;
	margin: 5px;
	padding: 0;
	float: left;
}

I masz dwa divy obok siebie

Jak byś miał 2x divy z klasa2 to obydwa byłyby w jedenj linii.
Jeżeli masz 2x klasa1 to one będą teraz w jedenj linii.

komentarz 18 sierpnia 2015 przez Patrycjerz Mędrzec (192,340 p.)

Eh... czy ty czytałeś moje pytanie? frown

komentarz 18 sierpnia 2015 przez chris Gaduła (3,680 p.)

Spróbuj
 

html, body {
   width: 100%;
  heighT: 100%; 

}

Teraz każdy div można ustawić jak chcesz.

komentarz 18 sierpnia 2015 przez Patrycjerz Mędrzec (192,340 p.)

Ale mi nie chodzi o sposób na ułożenie tych divów w linii, bo go znam, tylko na wytłumaczenie problemu z pytania wink

komentarz 18 sierpnia 2015 przez chris Gaduła (3,680 p.)
komentarz 18 sierpnia 2015 przez Patrycjerz Mędrzec (192,340 p.)

Hmmm... ciekawe. Nie znam może dobrze angielskiego, ale wydaje się, że pomoże mi to w zrozumieniu problemu. Dzięki wink

0 głosów
odpowiedź 18 sierpnia 2015 przez Boshi VIP (100,240 p.)
Wrzuć kawałek kodu na jakiś portal typu "code fly"
komentarz 18 sierpnia 2015 przez Patrycjerz Mędrzec (192,340 p.)
0 głosów
odpowiedź 18 sierpnia 2015 przez Patrycjerz Mędrzec (192,340 p.)

Mam pytanie: czyli to znaczy, że własność float powoduje, że element przemieszcza się na lewą, lub prawą stronę rodzica, a nie, że przemieszcza się względem elementu poprzedzajacego?

komentarz 18 sierpnia 2015 przez Patrycjerz Mędrzec (192,340 p.)

W końcu to zrozumiałem! Float nie powoduje przemieszczenia względem elementu poprzedzającego, a kontenera, w którym się dany element znajduje. To wszystko wina opisu na stronie Kurs HTML! Nie czytam tego nigdy więcej!

Podobne pytania

+1 głos
2 odpowiedzi 1,063 wizyt
pytanie zadane 2 sierpnia 2015 w HTML i CSS przez Patrycjerz Mędrzec (192,340 p.)
+2 głosów
1 odpowiedź 302 wizyt
pytanie zadane 3 sierpnia 2016 w HTML i CSS przez dkarski Obywatel (1,610 p.)
0 głosów
3 odpowiedzi 1,731 wizyt
pytanie zadane 4 lutego 2020 w Offtop przez MarcinP Nowicjusz (120 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 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!

...